update root Component's property from the child Component with redux

Question

I have two components the Root Component that contains list of data. the data is displayed from firebase. the second component is a DateRangepicker that helps picks to dates so We can filter the root's component data.

    class Child extends React.Component {
    pickDateRange = (e: React.FormEvent<HTMLFormElement>) => {
    // getting data successufly from firebase
    // this is where I get the error trying to set the root component's props
    this.props.data = data
    }
    render() {
    return (
            <div>
                <form onSubmit={this.pickDateRange} className={classes.container} noValidate>
                    <TextField
                        id="datestart"
                        label="Starting Date"
                        type="date"
                        onChange={this.handleStartDate}                        
                    />
                    <TextField
                        id="dateend"
                        label="Ending Date"
                        type="date"
                        onChange={this.handleEndDate}
                        className={classes.textField}                        
                    />
                    <Button
                        type="submit"
                    >
                        Filter
                </Button>
                </form>                
            </div>
        );
    }}

class Parent extends React.Component {
       render() {
                 return (<div> <ChildB data={this.state.data}/></div>)
}}

xDreamCoding · Answer 1 · 2019-03-24T15:44:27.333

0

You cannot alter the props from inside the child component, either pass a callback from the parent via props to the child or use state in the child component or use your redux store.

Well the easy fix would be:

this.props.changeData(data)

with parent render:

render() {
   return (<div> <ChildB data={this.state.data} changeData={(data)=>{this.setState({data: data})}/></div>)
}

but it depends and you don't really want to set the parents state trough a child like that.

edited Mar 24 '19 at 15:44

answered Mar 24 '19 at 14:43

xDreamCoding

1,654
1
12
18

Thank you for your answer. How can I update the root component data using props? – Ayoub Bani Mar 24 '19 at 14:59
@AyoubBani edited my answer, but that's kind of a dirty fix and you aren't really using redux or proper state/props seperation like that. – xDreamCoding Mar 24 '19 at 15:45

update root Component's property from the child Component with redux

1 Answers1