React passing data from child component to parent component - reactjs

Question

I am using a material UI Auto-suggest component and i would like to pass the full name to the parent component. This link is similar to my code https://codesandbox.io/s/ryn76v485m
The parent component is passing down the emailUser props
<SearchForUsers emailUser={this.emailUsers}/>
emailUsers = (user) => {
debugger
console.log(user + "trying to pass down from child")
}
The problem that i am having is that i cannot get the child component to pass the state correctly to the parent component.
At the moment i am doing the this.props.emailUser(this.state.values) after the mapping of the employees. The state is only change after the second person has been entered. I tried putting the this.props.emailUser into the onChange but that event does not update the state when the user clicks on the suggested name. Can anyone tell me how to do get the state back to the parent component correctly.
This is my child component.
class ShareForUsers extends Component {
constructor(props){
super(props);
this.state = {
menuOpen: false,
value: "",
values: []
};
}
componentDidMount() {
if (!!this.props.employees && this.props.employees.length == 0) {
this.props.listEmployees();
}
}
componentWillReceiveProps(nextProps) {
this.setState({ ...nextProps })
}
render() {
return (
<div>
<TextField
fullWidth
value={this.state.value}
InputProps={{
startAdornment: this.state.values
.concat()
.sort(({ label: aLabel }, { label: bLabel }) => {
if (aLabel < bLabel) return -1;
else if (aLabel > bLabel) return 1;
return 0;
})
.map(chip => (
<InputAdornment
component={Chip}
label={chip}
onDelete={() => {
const value = chip;
this.setState(({ values: prevValues }) => {
const values = prevValues;
const idx = values.indexOf(value);
if (idx === -1) {
values.push(value);
} else {
values.splice(idx, 1);
}
return {
values
};
});
}}
/>
))
}}
onChange={evt => {
const value = evt.target.value;
this.setState({
value,
menuOpen: value.length > 0
});
}}
onFocus={() =>
this.setState(({ value }) => ({
menuOpen: value.length > 0
}))
}
onBlur={() => this.setState({})}
/>
<div>
{this.state.menuOpen ? (
<Paper
style={{
position: "absolute",
zIndex: 100,
width: "100%"
}}
>
{this.props.employees
.filter(
employee =>
employee.user.email.toLowerCase().indexOf(this.state.value) > -1
)
.map(employee => (
<MenuItem
key={employee.user.id}
onClick={() => {
this.setState(({ values: prevValues }) => {
const values = prevValues.concat();
const idx = values.indexOf(employee.user.id);
if (idx === -1) {
values.push(employee.user.email);
} else {
values.splice(idx, 1);
}
return {
values,
value: "",
menuOpen: false
};
});
}}
>
{employee.user.email}
</MenuItem>
))}
</Paper>
) : (
""
)}
</div>
</div>
)
}
}
const shareForUsers = withStyles(styles)(ShareForUsers)
export default connect(
state => state.user,
dispatch => bindActionCreators(actionCreators, dispatch)
)(shareForUsers);
Thanks

Answer 1

In onChange event you can pass the value from SearchForUsers component to its parent by this:
onChange={evt => {
const value = evt.target.value;
this.setState({
value,
menuOpen: value.length > 0
});
this.props.emailUser(value);
}}