React: Uncaught TypeError between parent and child

Question

I've split a component into a parent and child element. I'm passing data from the parent to the child via states but receiving an Uncaught TypeError: Cannot read property 'imageSource' of null which is odd because I'm following the same process as another element of the application. I've also followed the Components and Props documentation but am still a little stumped.

If I've defined the state, set it, and added it as a property to the child, how come the state is still null?

class Parent extends React.Component {

 constructor(){
   super();
   this.state = {
     imageSource: [],
     imageTitles: [],
   }
 }

 componentDidMount(){

 ...
 ...
 // grabbing stuff from Dropbox API
 ...
 ...

  .then(function(){
    that.setState({

      imageSource: sources,
      imageTitles: titles,

    });
   });



 render(){
   return(
      <Child imageSource={this.state.imageSource} imageTitles=
      {this.state.imageTitles} />
   );
 }
}



class Child extends React.Component{

 render(){
    if(!this.state.imageSource.length)
      return null;

      let titles = this.state.imageTitles.map((el, i) => <p>{el}</p>)

      let images = this.state.imageSource.map((el, i) =>

        <div className="imageContainer">
           <img key={i} className='images' src={el}/>
           <div className="imageTitle">{titles[i]}</div>
        </div>
       )

    return (
      <div className="ChildWrapper">
         {images}
      </div>
    );
  }
}

Javier Suero Santos · Accepted Answer · 2017-08-24T15:53:53.480

In the child you will receive the variables as props (not state).

In your case this code should work

if(!this.props.imageSource.length)
  return null;

  let titles = this.props.imageTitles.map((el, i) => <p>{el}</p>)

  let images = this.props.imageSource.map((el, i) =>

    <div className="imageContainer">
       <img key={i} className='images' src={el}/>
       <div className="imageTitle">{titles[i]}</div>
    </div>
   )

Take a look to this question, I think it will help you to understand the differences.

What is the difference between state and props in React?

score 1 · Answer 2 · answered Aug 24 '17 at 15:48

Couple of things stand out. This piece of code here:

class Child extends React.Component{

 render(){
    if(!this.state.imageSource.length)
      return null;

Is wrong because your Child component has no state. You're not declaring any state in your Child component, and you probably shouldn't. What it does have is props passed down from the Parent component. This is a critical part of learning react. What you would want to check here is if(!this.props.imageSource.length) and edit your additional code that calls this.state and replace with this.props.

Another thing I noticed is this:

 that.setState({

      imageSource: sources,
      imageTitles: titles,

    });

Why that.setState({...}) ? That's confusing, and there really is no reason you should ever call it. It should always be this.setState({...}) If you're doing some re-binding of this, you're doing something wrong as that should not ever be the case and can lead to bugs pretty easily.

React: Uncaught TypeError between parent and child

2 Answers2