Passing data on an API call from parent to child container in react

Question

I am fairly new to react and I was stuck at something trivial I feel. So what I want to do is that I want to pass data from a parent component to child. My code looks like this.

getData(key) {
    let { getData } = this.props;

    if (getData.code === "ON") {
        Codeapi(getData._id[0])
        .then(res => console.log("Result is", res)),
        (error => console.log(error));
    }
    return (
        <Dialog
            key={key}
            side="left"
            onImageClick={this.handleClick}>
            <ReactSlick />
            </Dialog>
    );
}

So basically I am just console logging the result out right now but I want to pass res somehow to the ReactSlick component which is wrapped inside Dialog component. How will I be able to use the res data in the ReactSlick component?

score 1 · Accepted Answer · answered Apr 02 '19 at 02:58

Try passing the data stored in parent's state to the child element as a property. Change the state upon receiving data from API. Chaning the data property of the parent will propagate to the child.

getData(key) {
    let { getData } = this.props;

    if (getData.code === "ON") {
        Codeapi(getData._id[0])
        .then(res => this.setState({data: res)),
        (error => console.log(error));
    }
    return (
        <Dialog
            key={key}
            side="left"
            onImageClick={this.handleClick}>
            <ReactSlick data={this.state.data} />
            </Dialog>
    );
}

In the constructor of the parent component:

constructor(){
  this.state = {data: null}
}

score 0 · Answer 2 · answered Apr 02 '19 at 02:59

Try to use async/await to get the res first, then pass it into child component

async getData(key) {
      let { getData } = this.props;
      let res = null;
      if (getData.code === "ON") {
          try{
            res = await Codeapi(getData._id[0]);
          } catch(e) {
            console.log(e);
          }
      }
      return (
          <Dialog
              key={key}
              side="left"
              onImageClick={this.handleClick}>
              <ReactSlick res/>
              </Dialog>
      );
    }

Uncaught Invariant violation as react doesnt know how to render promises. How will i work around this? — BleachedAxe, Apr 02 '19 at 13:58

score 0 · Answer 3 · answered Apr 02 '19 at 03:00

You might need a stateful component to achieve this. Save the response to the state and then get he res value from state to pass it into the Slick component.

export class TestComponent extends Component {
  constructor() {
    super();
    this.state = {
      res: null
    };
    this.getData = this.getData.bind(this);
  }

  componentDidMount() {
    this.getData();
  }

  getData() {
    let { getData } = this.props;
    if (getData.code === "ON") {
      Codeapi(getData._id[0])
        .then(res => this.setState({ res })) // saving res to state
        .catch(error => console.log(error)); // use catch for errors from promises
    }
  }

  render() {
    const { res } = this.state;
    return (
      <Dialog
        key={key}
        side="left"
        onImageClick={this.handleClick}>
        <ReactSlick res={res} />
      </Dialog>
    )
  }
}

Passing data on an API call from parent to child container in react

3 Answers3