I have ponent like below it have 4 state values
class ComposedTextField extends React.Component {
state = {
name: '',
title: '',
email: '',
experience: ''
};
handleChange = event => {
this.setState({
[event.target.name]:event.target.value,
[event.target.title]:event.target.value,
[event.target.email]:event.target.value,
[event.target.experience]:event.target.value
});
};
render() {
const { classes } = this.props;
return (
<div>
<Typography variant="headline">Header Info</Typography>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="name-simple">Name</InputLabel>
<Input name="name" value={this.state.name} id="name-simple" onChange={this.handleChange}/>
</FormControl><br></br>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="title-simple">Title</InputLabel>
<Input name="title" id="title-simple" value={this.state.title} onChange={this.handleChange}/>
</FormControl><br></br>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="email-simple">Email</InputLabel>
<Input name="email" id="email-simple" value={this.state.email} onChange={this.handleChange}/>
</FormControl><br></br>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="experience-simple">Experience</InputLabel>
<Input name="experience" id="experience-simple" value={this.state.experience} onChange={this.handleChange}/>
</FormControl><br></br>
</div>
);
}
}
I need to pass those 4 values into another ponent
function Header(props) {
const { classes, avatar } = props;
return (
<div>
<Typography variant="headline">KASUN FERNANDO</Typography>
<Typography variant="subheading" color="textSecondary">
SENIOR DESIGNER-UI/UX
</Typography>
<Typography variant="subheading" color="textSecondary">
[email protected]
</Typography>
<Typography variant="subheading" color="textSecondary">
4+ years of experience
</Typography>
</div>
);
}
In this ponent there are 4 typogrphy I need to display that state value in 4 typography
How can I do this please help me im new to React js
I have ponent like below it have 4 state values
class ComposedTextField extends React.Component {
state = {
name: '',
title: '',
email: '',
experience: ''
};
handleChange = event => {
this.setState({
[event.target.name]:event.target.value,
[event.target.title]:event.target.value,
[event.target.email]:event.target.value,
[event.target.experience]:event.target.value
});
};
render() {
const { classes } = this.props;
return (
<div>
<Typography variant="headline">Header Info</Typography>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="name-simple">Name</InputLabel>
<Input name="name" value={this.state.name} id="name-simple" onChange={this.handleChange}/>
</FormControl><br></br>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="title-simple">Title</InputLabel>
<Input name="title" id="title-simple" value={this.state.title} onChange={this.handleChange}/>
</FormControl><br></br>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="email-simple">Email</InputLabel>
<Input name="email" id="email-simple" value={this.state.email} onChange={this.handleChange}/>
</FormControl><br></br>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="experience-simple">Experience</InputLabel>
<Input name="experience" id="experience-simple" value={this.state.experience} onChange={this.handleChange}/>
</FormControl><br></br>
</div>
);
}
}
I need to pass those 4 values into another ponent
function Header(props) {
const { classes, avatar } = props;
return (
<div>
<Typography variant="headline">KASUN FERNANDO</Typography>
<Typography variant="subheading" color="textSecondary">
SENIOR DESIGNER-UI/UX
</Typography>
<Typography variant="subheading" color="textSecondary">
[email protected]
</Typography>
<Typography variant="subheading" color="textSecondary">
4+ years of experience
</Typography>
</div>
);
}
In this ponent there are 4 typogrphy I need to display that state value in 4 typography
Share Improve this question edited May 24, 2018 at 9:20 supra28 1,63610 silver badges17 bronze badges asked May 24, 2018 at 6:50 HemalHerathHemalHerath 1,0562 gold badges18 silver badges38 bronze badges 1How can I do this please help me im new to React js
- If the Header ponent is not related to posedTextField, you either need to store the data in a mon parent or use redux, mobx. Check stackoverflow./questions/46594900/… – Shubham Khatri Commented May 24, 2018 at 7:00
3 Answers
Reset to default 9There are a lot of non redux, mobx, flux strategies on how to manage/pass state between ponents - Props, Instance Methods, Callbacks etc. You can read this article on ponent munication. You might want to take a look at these before going with a heavy weight state management framework.
From the code given, I am assuming header is a higher level ponent. For child to parent munication you can make use of callback functions
The parent would pass a function to the child as a prop, like this:
<MyChild myFunc={this.handleChildFunc} />
And the child would call that function like so:
this.props.myFunc();
How are these two ponents related?
Do they have the same parent ponents?
If yes you can handle the state in the parent ponent and pass the handler function down to ComposedTextField as a prop which ComposedTextField calls onChange
class ParentComponent extends React.Component {
handleChange = event => {
this.setState({
[event.target.name]: event.target.value,
})
}
render() {
return (
<div>
<HeaderComponent {...this.state} />
<ComposedTextField onChange={this.handleChange} {...this.state}/>
</div>
)
}
}
then inside your ComposedTextField you will have something like
class ComposedTextField extends React.Component {
render() {
const { classes } = this.props
return (
<div>
<Typography variant="headline">Header Info</Typography>
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="name-simple">Name</InputLabel>
<Input
name="name"
value={this.props.name}
id="name-simple"
onChange={this.props.onChange}
/>
</FormControl>
<br />
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="title-simple">Title</InputLabel>
<Input
name="title"
id="title-simple"
value={this.props.title}
onChange={this.props.onChange}
/>
</FormControl>
<br />
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="email-simple">Email</InputLabel>
<Input
name="email"
id="email-simple"
value={this.props.email}
onChange={this.props.onChange}
/>
</FormControl>
<br />
<FormControl fullWidth className={classes.formControl}>
<InputLabel htmlFor="experience-simple">Experience</InputLabel>
<Input
name="experience"
id="experience-simple"
value={this.props.experience}
onChange={this.props.onChange}
/>
</FormControl>
<br />
</div>
)
}
}
Your header ponent will use the props to display the set values like
function Header(props) {
const { classes, avatar } = props
return (
<div>
<Typography variant="headline">{props.name}</Typography>
<Typography variant="subheading" color="textSecondary">
{props.title}
</Typography>
</div>
)
}
To acplish it, you should introduce some global state mechanism (Redux, MobX, ...).
handleChange - instead of setting data to the ponent's state - will dispatch actions that will write data to the global state, from which any other ponent, like Header, will be allowed to read.