React: Props data unpassed to child component

Question

i have 2 components, a parent and a child component in React. I am fetching data from an API in my parent component, and i want to pass it on to the child component. The data is successfully obtained, and i can view the data in console.log(). The data is subsequently stored in the parent's state(this i have also verified and view it in the console log.

Depending on the number of arrays i have in my data, i want to create the corresponding number of child components.

I initially used this function

               {
                    this.state.tables.map((item) => (                    
                        <App data = {this.state.tables} />
                    ))
                }

to attempt to map the data to my child component. when the data wasnt passing through, i attempted to simply past an array(from my state) to my child component

<App data={this.state.tables}/> //App here is my child component

but to no avail. When i console log

props

in my child component this is what i get, the props data i was trying to pass through isnt passed

{history: {…}, location: {…}, match: {…}, staticContext: undefined}
history: {length: 7, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/table", search: "", hash: "", state: undefined, key: "bixd4p"}
match: {path: "/table", url: "/table", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object

and when i console.log(props.data) in the constructor or componentDidMount() of my child component, i get

undefined

Why is my child component unable to access the data with this.props.data?

attached below is the code from my parent and child components for better reference

Parent

render(){
  return (
      <div>
                {
                    this.state.tables.map((item) => (                    
                        <App data = {this.state.tables} />
                    ))
                }

              <App data={this.state.tables}/>


                <Button style = {{marginTop : 80, marginRight : 30, float : "right"}} variant="contained" color="primary" onClick={() => this.addnewtable()}>
                    Add New Table
                </Button>
      </div>
  );

  }

Child

constructor(props) {
        super(props)
        console.log("constructor", this.props)
        console.log("props", this.props.data)
        this.state = {
            users: [],
            message: null
        }
        this.reloadUserList = this.reloadUserList.bind(this);
    }

It doesn't, arrow functions return value implicitly. Can you show us full code sample of Parent & Child components? Try console.log(this.state) in Parent's render function, what does it show you? — Max
The console log props you're getting look like what's passed to a Link in a BrowserRouter. Are you using a Router component that we can't see here? — Sydney Y

Sohail Ashraf Sohail Ashraf · Accepted Answer · 2020-02-08T08:58:55

Try this.

this.state.tables.map( item => (              
   <App key = {<Some unique value>} data = {item} />
));

React: Props data unpassed to child component

1 Answers