Hooks Callback- react

Question

I'm currently building a react app which has a component slider and I need to pass the data back to the parent, the only fact is that the child is a little bit complex hook and I've been unable to find something similar that can help me to implement on my project, this is what I have:

The child

function valuetext(value) {
  return `${value}`;
}

export default function RangeSlider() {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 100000]);

  const handleChange = (event, newValue) => {
    var val = setValue(newValue);
    //I guess here is when I'm suposed to send the info to the parent
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Kilometers
      </Typography>
      <Slider
        value={value}
        max={500000}
        min={0}
        step={1000}
        onChange={handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
      <div id="seats-labes">
        <span>0km</span>
        <span>50.0000km</span>
      </div>
    </div>
  );
}

The parent:

 function WebFilter(props) { 

    
    return (
        <div className="filter-web-section">
         
        <Accordion className="filter-accordion">
            <Card className="card-section">
                <Card.Body>
                    <RangeSlider/>
                </Card.Body>
            </Card>
        </Accordion>
    </div>
    )
}


export default WebFilter;

The grandfather:

class ResultModel extends Component {

    render() {
    
        return (
            <div>
                <h1>Texto de prueba + boton</h1> <button>+</button>
                <div className="SiteHeader">
                    <Header/>
                </div>
                <div className="cars-result-content">
                    <div className="cars-result-content__filters">
                        <WebFilter
                        />
                    </div>
                    <div className="car-result-content-list">
                        <div className="car-result-list__counter-cars">
                            <p>400 vehicles</p>
                        </div>
                        <div className="car-result-content-list__statBar">
                            <StatBar/>
                        </div>
                        <div className="cars-result-page-list__ListCars">
                            <ResultsView/>
                        </div>
                    </div>   
                </div>        
            </div>
        )
    }
}

I've been reading about declaring the hook constants at the very first component (grandfather) but I haven't been able to find a way to pass the data through the father. Thanks in advance for any hint or help.

Just have the grandparent pass prop to its child (parent), and the parent pass props to its child. — Henry
– Henry, Commented Feb 10, 2021 at 6:18

codemonkey · Accepted Answer · 2021-02-10 06:24:38Z

1

The question is a bit short on specifics, but from what I can gather, you just need to pass down a function from component 1 through component 2 to component 3.

It's pretty straightforward actually.

In your grandpa component, create a function you want to pass:

class ResultModel extends Component {
   const func1 = (data) => {console.log(data)}

  render() {
    ...

Pass it down to father:

...
<WebFilter func1={func1} />
...

In the father component, get func1 and pass it down to child:

function WebFilter(props) { 
    const {func1} = props;
    
    return (
        <div className="filter-web-section">
         
        <Accordion className="filter-accordion">
            <Card className="card-section">
                <Card.Body>
                    <RangeSlider func1={func1} />
                </Card.Body>
            </Card>
        </Accordion>
    </div>
    )
}

Then in child call it like so:

export default function RangeSlider({func1}) {
  const classes = useStyles();
  const [value, setValue] = React.useState([0, 100000]);

  const handleChange = (event, newValue) => {
    var val = setValue(newValue);
    //I guess here is when I'm suposed to send the info to the parent
    func1("your data")
  };
...
...

answered Feb 10, 2021 at 6:24

codemonkey

7,9755 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Iván Herrera Over a year ago

Thanks for your answer, always I try this method I keep getting TypeError: func1 is not a function error.

Sangam Rajpara · Accepted Answer · 2021-02-10 06:36:54Z

1

If you want to learn something read about react concept called lifting the state up.

Read about lifting state up in react documentation

Or just google it read one or two articles if still don't get it then post a comment I'll write full code.

answered Feb 10, 2021 at 6:36

Sangam Rajpara

6784 silver badges13 bronze badges

Collectives™ on Stack Overflow

Hooks Callback- react

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related