CODEWITHSUNDEEP
javascriptreactjsclient-serveraxios
Hightower
Hightower

Reputation: 1008

How do I pass this.data through to other components with React and Axios

I am running a client and server setup (react and axios api calls) And I would like to understand how to access the returned data from my child components within the React Framework. I have the connection working to the http server, however i lack the foundational knowledge of working with this.state or props.

here is effectively my app.js

import React, { Component } from 'react';
import axios from 'axios';
import ChildComponent from "./components/childComponent"

class App extends Component {
 state = {
  data: [],
  intervalIsSet : false
};

  componentDidMount() {
    this.getDataFromDb();
    if (!this.state.intervalIsSet) {
      let interval = setInterval(this.getDataFromDb, 10000);
      this.setState({ intervalIsSet: interval });
    }
  }

  getDataFromDb = () => {
    fetch("http://localhost:3001/api/getData")
      .then(data => data.json())
      .then(res => this.setState({ data: res.data }));
  };

 render() {
    const { data } = this.state;
    return (
       <div>
         <childComponent />
       </div>

  );
};
}

export default App;

and here is the child component. --> my intention is to simply access (or print out) my returned data from the server from within the child component.

import React, { Component } from 'react';

class ChildComponent extends React.Component {
    render() {
      return (
            {this.props.data}
      );
    }
  }

  export default ChildComponent;

Upvotes: 2

Views: 4197

Answers (2)

Ertan Hasani
Ertan Hasani

Reputation: 1773

First make sure you uppercase the first letter of ChildComponent. If you want to pass data you should add that object as an attribute to the component, and then access it throught this.props. Also you need to render a single top element, and if you don't need div or any other html element, you can wrap it with React.Fragment.

Regarding to data, if its an array you can simply map through it and return data you want to see, if you want the entire object to show as a string, you can use JSON.stringify(). And if that's an object you can show only data you want.

class App extends React.Component {
  //...
  render() {
    const { data } = this.state;
    return (
      <div>
        <ChildComponent data={data} />
      </div>
    );
  }
}

//for array, ex: data = ["first","name"];
class ChildComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        {this.props.data.map(item => 
          <p>{item}</p>
        )}
      </React.Fragment>
    );
  }
}

//for object, ex: data = {id: 1, name: 'John'};
class ChildComponent extends React.Component {
  render() {
    const {data} = this.props;

    return (
      <React.Fragment>
        <p>{data.id}</p>
        <p>{data.name}</p>
      </React.Fragment>
    );
  }
}

//for single value (string, int, etc), ex: data = "my name";
class ChildComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>{this.props.data}</p>
      </React.Fragment>
    );
  }
}

//to show object as a string (could be any object mentioned before)
class ChildComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        {JSON.stringify(this.props.data)}
      </React.Fragment>
    );
  }
}

Upvotes: 1

Tholle
Tholle

Reputation: 112917

You can pass down the data array as the data prop to the child component. Make sure you also uppercase the first character in the component name, or it won't work properly.

A component needs to render a single top level element, so you could e.g. render a div with the JSON stringified data prop inside of it in the child component.

class App extends React.Component {
  // ...

  render() {
    const { data } = this.state;
    return (
      <div>
        <ChildComponent data={data} />
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div>{JSON.stringify(this.props.data)}</div>;
  }
}

Upvotes: 1

Related Questions