I have 3 input fields but changing one is affecting every input field.
I tried adding keys to the fields as well.
Code:
const App = () => {
const List = [
["1", "2"],
["3", "4"],
["10 ", "20"]
];
return (
<>
<Form layout="vertical" requiredMark={false}>
{List.map((l, index) => (
<div style={{ display: "flex", alignItems: "center" }} key={index}>
<Form.Item name="startRange">
<InputNumber
defaultValue={l[0]}
style={{
width: "70px",
height: "43px",
borderRadius: "4.5px",
border: "1px solid #CBCBCB"
}}
min={1}
max={100}
/>
</Form.Item>
<p style={{ marginLeft: "15px", marginRight: "12px" }}>To</p>
<Form.Item name="endRange">
<InputNumber
defaultValue={l[1]}
style={{
width: "70px",
height: "43px",
borderRadius: "4.5px",
border: "1px solid #CBCBCB"
}}
min={1}
max={100}
/>
</Form.Item>
</div>
))}
</Form>
</>
);
};
Codesandbox link: https://codesandbox.io/s/basic-antd-4-16-9-forked-p7r5wf?file=/index.js
You need to set your name unique for each input item. For example:
<Form.Item name={"startRange"+index}>
<Form.Item name={"endRange"+index}>
Related
I'm making an app, and I am currently working on making the login page.
I want the login tools to be responsive, centered by width and height. justify-content :
'center' was not working for me, but it seemed to be working with other people's code, so I am not sure what the problem is.
This is the image of the website
My Body Code
<div>
<Paper elevation={10} className={classes.root}>
<Grid align="center">
<h2 className={classes.title}>Log in </h2>
</Grid>
<form onSubmit={this.submitLogin}>
<Paper className={classes.paper}>
<TextField
id="standard-basic"
label="Email"
name="name"
type="text"
value={this.state.name}
onChange={this.handleInputChange}
fullWidth
required
/>
</Paper>
<Paper className={classes.paper}>
<TextField
id="standard-basic"
label="Password"
name="password"
type="password"
value={this.state.password}
onChange={this.handleInputChange}
fullWidth
required
/>
</Paper>
<Typography className={classes.pf}>
<Link href="">Forgot Password?</Link>
</Typography>
<Typography className={classes.pf}>{this.state.text}</Typography>
<Tooltip title="Will Remember You When You Come Back">
<FormControlLabel
control={<Checkbox name="checkedB" color="primary" />}
label="Remember Me"
/>
</Tooltip>
<Button
type="submit"
className={classes.log}
onClick={this.submitLogin}
variant="contained"
fullWidth
>
LOG IN
</Button>
</form>
<Typography className={classes.fp}>
Haven't created an account?
<Tooltip title="Go to the Sign Up page">
<Link href="./register"> Sign Up</Link>
</Tooltip>
</Typography>
</Paper>
</div>
My Theme Code
const styles = (theme) => ({
root: {
padding: 50,
height: 450,
width: 400
},
title: {
fontSize: "30px"
},
paper: {
marginTop: "15px"
},
log: {
background: "#3f51b5",
color: "white",
border: "0px",
borderRadius: "5px",
borderColor: "grey",
fontSize: "20px",
height: "45px",
marginTop: "5%"
},
fp: {
marginTop: "80px",
marginLeft: "65px"
},
pf: {
marginTop: "8px"
}
});
I couldn't really find the 'working' solutions for me, so I'm posting a question
Wrap your Paper component in a div with the styles you mention, that should work as expected:
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
// Change the size to fit the parent element of this div
width: '100%',
height: '100%',
}}>
<Paper>
SomeStuff...
</Paper>
</div>
Suppose I have a component that takes in MeetingData as an object and populates a <p> element with specific items from that object:
import React from 'react';
export default function MeetingsCard({ meetingData }) {
return (
<div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
<div className="card" style={{ border: "none", width: "100%" }}>
<div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
<h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
<p style={{ marginLeft: "50px" }}>Meeting location: {meetingData.meeting_location}, Meeting Date: {meetingData.meeting_date}</p>
<hr style={{ color: "grey" }} />
</div>
</div>
</div>
)
}
In this case, it expects there 2 be only a single item for meetingData.meeting_date and a single item for meetingData.meeting_location. But suppose the returned object has more than one and I need to populate multiple <p> elements? How would I do that if the meeting object/array looks like this:
meetingData = [
{
"date_time": "2021-07-07",
"meeting_location": "test-location1",
"name": "John Doe"
},
{
"date_time": "2021-07-08",
"meeting_location": "test-location2",
"name": "John Doe"
}
]
Just loop your data and add each entry as their own. Also good idea to create own component for the meeting entries so that it's easier to customize it if necessary.
MeetingEntry:
import React from 'react';
export default function MeetingEntry({ meetingData }) {
return (
<p style={{ marginLeft: "50px" }}>Meeting location: {meetingData.meeting_location}, Meeting Date: {meetingData.meeting_date}</p>
)
}
MeetingsCard:
import React from 'react';
import MeetingEntry from './MeetingEntry';
export default function MeetingsCard({ data }) {
return (
<div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
<div className="card" style={{ border: "none", width: "100%" }}>
<div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
<h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
{data.map((el, idx) => (
<MeetingEntry notification={el} key={idx} />
))}
<hr style={{ color: "grey" }} />
</div>
</div>
</div>
)
}
You can just loop through the array and display data something like below
export default function MeetingsCard({ meetingData }) {
return (
<div className="col-xl-1-12" style={{ margin: "10px", background: "#1A4565", border: "double" }}>
<div className="card" style={{ border: "none", width: "100%" }}>
<div className="card-body" style={{ width: "100%", background: "lightBlue" }}>
<h3 className="card-title" style={{ marginLeft: "10px" }}>Meetings</h3>
{meetingData.map(meeting => (
<p style={{ marginLeft: "50px" }}>Meeting location: {meeting.meeting_location}, Meeting Date: {meeting.date_time}</p>))
<hr style={{ color: "grey" }} />
</div>
</div>
</div>
)
}
I have combo box function:
function comboBox(props) {
const options = ['z','y','x']
var va;
return (
<div style={{height:'100vh',backgroundImage: `url(${back})`, backgroundSize: 'cover', marginTop: '-8vh'}}>
<div style={{height:'100vh', textAlign: 'center', alignItems: 'center', direction: 'rtl'}}>
<h1 style={{marginTop: '8vh', marginLeft: '-10vh', paddingTop: '10vh'}}>hoose</h1>
<Autocomplete style={{borderStyle: 'groove', borderWidth: 'Thick'}}
options={options}
style={{ width: 300 }}
defaultValue={options[0]}
getOptionLabel={(option) => options[0]}
onChange={(event, value) =>va=value}
renderInput={(params) =>
<TextField {...params} variant="outlined" style={{paddingRight: '90vh'}}/>}
/>
<button style={{backgroundColor:'#f4eae0', height: '10vh', width:'52vh', marginTop: '28vh', marginRight: '10vh'}} onClick={() => getApi(va)}>go if a value selected)</button>
</div>
</div>
);
}
which give me a combo box with 3 options to choose, and a default value- the first option.
but if I go ahead without choosing any value, based on my default setting- I will get undefined as selected value allthought I see the first option in the combo box. why?
The issue is around the way you are saving val. Because you are using React you should be saving it within a state and the value should come from there. If you want to check if there isnt a value, you just add a check within the onChange event.
import { useState } from 'react'
const options = ['z', 'y', 'x']
function comboBox(props) {
const [val, setVal] = useState(options[0])
return (
<div
style={{
height: '100vh',
backgroundImage: `url(${back})`,
backgroundSize: 'cover',
marginTop: '-8vh',
}}>
<div
style={{
height: '100vh',
textAlign: 'center',
alignItems: 'center',
direction: 'rtl',
}}>
<h1
style={{ marginTop: '8vh', marginLeft: '-10vh', paddingTop: '10vh' }}>
choose
</h1>
<Autocomplete
style={{ borderStyle: 'groove', borderWidth: 'Thick' }}
options={options}
style={{ width: 300 }}
value={val}
onChange={(event, value) => {
if (value === null) {
alert('no value')
}
setVal(value)
}}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
style={{ paddingRight: '90vh' }}
/>
)}
/>
<button
style={{
backgroundColor: '#f4eae0',
height: '10vh',
width: '52vh',
marginTop: '28vh',
marginRight: '10vh',
}}
onClick={() => {
if(val === null){
alert('no value provided')
} else {
getApi(val)
}
}}
>
go if a value selected)
</button>
</div>
</div>
)
}
Or alternatively you could add a useEffect that has a dependency of val which would trigger whenever you change the autocomplete and do the same check I have done in the onChange
useEffect(() => {
if(val === null){
alert('no value')
}
}, [val])
In a Project, I have list of countries with its specific country codes. In order to search the countries and their codes I have created TextField on Paper(Material UI component). When clicked on it closes unexpectedly. See the code below for reference.
<TextField
id="standard-select-currency"
select
value={countryCode}
onChange={handleChange}
SelectProps={{
renderValue: (value) => value
}}
>
<Paper style={{ width: "280px" }}>
<div
style={{
backgroundColor: "white",
top: "8px",
position: "sticky",
zIndex: "999",
width: "inherit"
}}
>
{/* Here this component closes when clicked on it */}
<TextField
placeholder="Enter Your Country"
onChange={onChange}
type="text"
/>
<hr />
</div>
{Object.values(countryData).map((values, i) => (
<MenuItem key={values.calling_code} value={values.calling_code}>
<div
style={{
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
width: "100%",
position: "relative"
}}
>
<p>{values.country}</p>
<p>{"+" + values.calling_code}</p>
</div>
</MenuItem>
))}
</Paper>
</TextField>
What could be best possible solution to prevent it from shutting down?
Codesandbox Link: https://codesandbox.io/s/material-demo-forked-hfwb4
just add,
<TextField
placeholder="Enter Your Country"
onChange={onChange} onClick={(event)=>event.stopPropagation()}
type="text"
/>
it will
it will not close unexpectedly.
I'm new to material UI framework, i want to stretch the grid accordingly displayed in the content. I couldn't able to do that. Can anyone help me in this?
<Card>
<CardHeader
avatar={<Avatar aria-label="recipe">S</Avatar>}
title={
<>
<InputBase placeholder="Search Google Maps" margin="normal" />
<IconButton type="submit" aria-label="search">
<SearchIcon />
</IconButton>
</>
}
/>
<Divider />
<CardContent
style={{ overflow: "scroll" }}
className={classes.contentHeight}
id="chatList"
>
<div>
<Message isSender content="Hello" />
{this.state.data.map(item => {
if (item.isSender) {
return (
<Message isSender name="Sanjana" content={item.content} />
);
}
return <Message name="Sanjana" content={item.content} />;
})}
</div>
</CardContent>
<Divider />
<CardActions>
<Paper className={classes.contentPaper}>
<Input
margin="dense"
className={classes.input}
placeholder="Enter a Message"
disableUnderline
/>
</Paper>
</CardActions>
</Card>
Can anyone help me in this query?
Thanks in advance!
Remove width: 100
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
width: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
should be
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
minHeight: 40,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
{content}
</Card>
because the width: 100 gives it a width of 100px.
To make the content to stretch full width, you can use width: "fit-content" and assign your width value of 100 to minWidth: 100.
So your card will look like,
<Card
style={{
backgroundColor: "#eee",
float: isSender ? "right" : "left",
padding: 16,
diaplay: "block",
minHeight: 40,
width: "fit-content",
minWidth: 100,
display: "flex",
alignItems: "center",
textAlign: "center"
}}
>
To make the content left align inside card, you can assign style to Grid like,
<Grid style={{ paddingBottom: 8, textAlign: "left" }} item xs={12}>
<span>{name}</span>
</Grid>
Forked sandbox