I'm trying to code the most basic grid.
1 Row, 2 Columns. I can't get it to create 2 columns...
Here's my code:
<Row>
<Col span={12}>Col 1</Col>
<Col span={12}>Col 2</Col>
</Row>
Here's how it's displayed
The code you have written is correct. Make sure that you have imported Antd CSS (import 'antd/dist/antd.css')
import React from 'react';
import 'antd/dist/antd.css';
import { Row, Col } from 'antd';
const Demo = () => {
return (
<>
<Row>
<Col span={12}>Col 1</Col>
<Col span={12}>Col 2</Col>
</Row>
</>
);
}
export default Demo;
Related
I'm trying to have restaurant cards displayed on my app and I'm not sure what would be the best way to have the image conditionally render according to which restaurant it is. This way it works but it is not optimal since if I have 10 I have to manually add all 10 imports and cases.
import Link from "next/link";
import React from "react";
import styles from "../styles/Card.module.css";
import kegLogo from "../assets/Keg.png";
import Image from "next/image";
import pizzaLogo from "../assets/pizza-logo.png";
function RestaurantCard({ id, title, description }) {
return (
<Link className={styles.link} href={`/restaurants/${title}`}>
<div className={styles.card}>
{id == 1 && (
<Image className={styles.image} src={kegLogo} alt={title} />
)}
{id == 2 && (
<Image className={styles.image} src={pizzaLogo} alt={title} />
)}
<div className={styles.content}>
<h3 className={styles.title}>{title}</h3>
<p className={styles.description}>{description}</p>
</div>
</div>
</Link>
);
}
export default RestaurantCard;
I am using Quill.js to have a wysiwyg editor, and it recommends to import the snow.css file as the starting point, but I can't seem to override the styling from that file. For instance:
import '../path/snow.css' // The css file for the basic styling
import styles from '../path/component.module.scss' // the module
return (
<div className={[styles.newsWrapper].join(' ')}>
<div data-cy="status-editor-panel" className={styles.newseditor}>
<ReactQuill
className={styles.quill}
theme="snow"
onChange={handleChange}
modules={{}}
placeholder={"Start typing to create your article."}
/>
{/* { richText.count > 0 && <Grid item px={3}>{`${richText.count} total words`}
</Grid> } */}
</div>
{error && (
<p style={{ color: "red" }}>
Please write something about your article
</p>
)}
<div className={"postbuttonwrapper"}></div>
<Button
className={styles.postbutton}
onClick={confirmStepOne}
fullWidth
variant="contained"
>
Next
</Button>
</div>
);
}
I want to make the outlines zero. I'm importing the styling from '../path/component.module.scss' and the module is *after* the import. I don't know how to order the styling.
ProductsCard
import React from 'react'
import { Card, Container, Row, Col, ListGroup, Button} from 'react-bootstrap'
function ProductCard(props){
return(
<div>
<Container>
<Row>
<Col md={3} xs={6}>
<Card border="primary" style={{widht:'14rem'}}>
<Card.Img variant="top" src={props.product.image}/>
<Card.Body>
<Card.Title>{props.product.name}</Card.Title>
<Card.Text>Price: ${props.product.price}, Quantity: {props.product.quantity}
</Card.Text>
<Button variant="primary">Add to Cart</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
</div>
)
}
export default ProductCard
Home
import Axios from 'axios';
import React, { useEffect, useState } from 'react';
import {Container, Row, Col, Image, Card, Button, CardDeck} from 'react-bootstrap';
import axios from 'axios';
import ProductCard from './ProductCard';
enter code here
function Home(){
const url = 'http://localhost:8888/ProgWeb/public/api/products'
const [product, setProduct]=useState({
loading: false,
data: null,
error: false
})
useEffect(() => {
setProduct({
loading:true,
data: null,
error: false
})
axios.get(url)
.then(response => {
setProduct({
loading: false,
data: response.data,
error: false
})
})
.catch(() =>{
setProduct({
loading: false,
data: null,
error: true
})
})
}, [url])
let content = null
if(product.data){
content =
product.data.map((product, key) =>
<div key={product.id}>
<ProductCard
product={product}
/>
</div>
)
}
return (
<div>
{content}
</div>
);
}
export default Home;
Now this is my first time using react-bootstrap. So I don't have much clue here.
What I want is for the cards to be generated in such a way that there are THREE cards in a row.
Now this is the code that I have done so far, but I am confused on how can I make the cards horizontal, I already typed in bootstrap but I still get the products vertically
In your ProductsCard component, Give your div container an id, it can be anything. Example:
function ProductCard(props){
return(
<div id=“unique-name”>
<Container>
<Row>
...
</Row>
</Container>
</div>
)
}
Now go to your css file and add the following:
#unique-name {
display: flex;
flex-direction: row;
justify-content: space-around
}
We are making the Container a flexbox and changing the direction to horizontal.
Reference: https://css-tricks.com/almanac/properties/f/flex-direction/
ALTERNATIVELY:
You can Simply add class=“row” to the div element like this:
if(product.data){
content =
product.data.map((product, key) =>
<div class=“row” key={product.id}>
<ProductCard
product={product}
/>
</div>
)
}
Let me know if this helps!
I have designed a form with validation using TypeScript Material UI and Formik. I want a material UI Icon to appear in my textfield area, here's my code:
import React from 'react'
import { Formik, Form, FieldAttributes,useField} from 'formik'
import { TextField } from '#material-ui/core'
import CalendarTodayIcon from '#material-ui/icons/CalendarToday'
import * as yup from 'yup'
import './MainInfo.css'
const MyTextField: React.FC<FieldAttributes<{}>> = ({
placeholder,type,className,style,
...props
}) => {
const [field, meta] = useField<{}>(props);
const errorText = meta.error && meta.touched ? meta.error : "";
return (
<div className='container'>
<TextField
placeholder={placeholder}
className={className}
style={style}
type={type}
{...field}
helperText={errorText}
error={!!errorText}
id="outlined-basic"
variant="outlined"
/>
</div>
);
};
export function MainInfo() {
return (
<div>
<Formik
validateOnChange={true} validationSchema={validationSchema} initialValues={{ Title: '', ActivationDate: '', ExpirationDate: '', DirectManager: '', HRBP: '' }} onSubmit={(data) => {
console.log(data)
}}
>
{({values, errors}) => (
<Form id='my-form' >
<div>
<label className='label'>عنوان</label>
<div >
<MyTextField style={{width:'60%'}} placeholder='طراح' name='Title' type='input' />
</div>
...
</div>
</Form>
)}
</Formik>
</div>
)
}
but the problem is that I can not add a new Icon property or InputProp since <FieldAttributes<{}>> doesnt accept it. how can I define a new property for the FieldAttributes or fix this issue?
Use the TextField Props InputProps to customize the input field
And use startAdornment, endAdornment to customize the prefix/suffix
Finally use icon inside InputAdornment would be fine
import { TextField, InputAdornment } from "#material-ui/core";
import ExpandLess from "#material-ui/icons/ExpandLess";
import ExpandMore from "#material-ui/icons/ExpandMore";
<TextField
id="standard-basic"
label="Standard"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<ExpandLess />
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
<ExpandMore />
</InputAdornment>
)
}}
/>
Refer:
MUI TextField Props API: InputProps, startAdornment, endAdornment
MUI InputInputAdornment Props API
online demo: https://stackblitz.com/edit/gzlbzm
iam using the latest version of meteor & react. Yesterday I switched to the newest version of bootstrap. Before that everything worked just fine now I can´t fix my (really noobish) problem.
import React, {Component} from 'react';
import { FormControl, , etc. } from 'react-bootstrap';
export default class Login extends Component {
login(event) {
event.preventDefault();
var username = this.refs.inputName.refs.input.value.trim();
var password = this.refs.inputPw.refs.input.value.trim();
Meteor.loginWithPassword(username, password, function (error) {
if (error) {
...
}
else {
FlowRouter.go('/c/' + Meteor.user().username);
}
});
this.refs.password.refs.input.value = "";
}
render() {
return (
<Row>
<Col xs={3} xsOffset={4}>
<form onSubmit={this.login.bind(this)}>
<FormGroup>
<ControlLabel>Willkommen</ControlLabel>
<FormControl
type="text"
placeholder="Benutzername"
ref="inputName"
name="username"/>
</FormGroup>
<FormGroup>
<FormControl
placeholder="Password"
ref="inputPw"
name="password"
type="password"/>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button bsStyle="primary" label="Login" id="loginButton" type="submit" active>Login</Button>
</Col>
</FormGroup>
</form>
</Col>
</Row>
);
}
In my previous solution I used a simple input form. Due to deprecation I switched to this formControl stuff. Now it seems that
<form onSubmit={this.login.bind(this)}>
login never gets called. Console.log(username) returns undefined.
Thanks in advance and many greetings.
//edit 1:
It seems like Iam not the only one with this problem.
React-bootstrap Form getValue not a function
This helped me a lot to find my solution:
import ReactDom from 'react-dom';
var username = ReactDom.findDOMNode(this.refs.inputName).value;
var password = ReactDom.findDOMNode(this.refs.inputPw).value;