Question about React keys

So I’m follwing Stephen Grider’s Modern React course on udemy, and there’ something that is not quite clear to me, I can’t find any helpful answer on the Q&A section so I hope someone can clarify this to me before moving on with the course.

First, let me provide with the code for some context:

class App extends Component {
  constructor(props) {
    super(props)

    this.state = { videos: [] };

    YTSearch({key: API_KEY, term: 'surfboards'}, videos => {
      // Same as {videos: videos} as key and value are the same, ES6 syntax
      this.setState({ videos });

    });
  }

  render() {
    return (
      <div>
       <SearchBar />
       <VideoList videos={this.state.videos}/>
      </div>
    );
  }
}

// Take this components' generated HTML and put it on the page
ReactDOM.render(<App />, document.querySelector('.container'));

My doubt comes with this piece of code here <VideoList videos={this.state.videos}/> I know how we define state and how to change it (Here we are just getting the value of state property videos) and I know we define variables in React using brackets {} but what’s “videos”? The name of the variable?

I am playing around with the code but if I change the name of the key (I think videos is a key here?, not sure) nothing works. If it’s a variable then the name can be anything.

For more context, this is the code from the child component that we are passing the data to.

const VideoList = (props) => {

  const VideoItems = props.videos.map(video => {
    return <VideoListItem video={video} />;
  });

  return (
    <ul className="col-md-4 list-group">
      {VideoItems}
    </ul>
  );
}

I know with this code we are just using map to iterate through the array we defined in our state (VideoListItem is just a <li></li> component)

but againt, something I don’t quite understand is happeing: video={video}

For example I have no problem understanding the following code:

     <div>
       <input
         value = {this.state.term}
         onChange = {event => this.setState({ term: event.target.value })} />
      </div>

“value” in this case is a valid HTML attribute and we are just setting the value of the input tag to be equal to whatever the value os state is, but video? I am completely lost.

I really want to be able to understand this before moving on, I feel it’s a very important concept. Any help is appreciated.

Yes videos on the left of the equal sign is just a variable and it cane be anything. The child component refers to it though so you have to remember to change the reference in the child.

So if you pass
v={this.state.videos}
Then later in the child you must refer to props.v not props.videos

As for video={video}
It is just passing a value from the list to the child comp VideoListItem as a property with the name video

1 Like

That made sense, thanks. Finally I can move on with the course!

One more question about video={video}, let’s say I’d like to change the name of video for “elm”, do I change the name on the left or the right? Also is this related to destructuring?, so I can go ahead and study a bit more about destructuring to make things easier for me while learning React.

To change the variable ref, change the word on the left of the equal sign this is not a destructuring thing, it is a javascript basic programming thing.
When you write this

var potato;
potato= 2*3;

The variable is on the left correct?
So always the variable is on the left and the value on the right.

The thing is that here we are using {} brackets and when i console.log(video={video}) it’s an array of objects.

Plus this:

const VideoItems = props.videos.map(el => {
    console.log(el={el})
  });

Notice that I had to change everything for this code to work, not only the name on the left. I understand JS variables, but this React syntax is confusing me a little bit.

const VideoItems = props.videos.map(el => {
    console.log(video={el})
  });

The above code will give me an error.

I have never seen anyone log an assignment statement before. Usually we log variables… i have also never seen anyone log with a curly brace inside.

In react, curly braces denote javascript code. So putting them inside a console.log is something that i believe turns them into regular braces…

If you want to log video then just write
console.log(video)

If you want to log the variable that is being passed to the child comp, then add console.log inside the child comp and have it log el

Yes, that’s true, we usually log variables, but I wanted to see what video={video} was doing or how it looks like.

According to the instructor in React we pass variables using brackets {} surprisingly to me console.log(video={video}) logs the same as

video={video}
console.log(video);

i think writing console.log(video={video}) is essentially assigning the value of video to video then logging video

i don’t think that’s what you actually want to log though.

if this is the original code

  const VideoItems = props.videos.map(video => {
    return <VideoListItem video={video} />;
  });

you may want to write it

  const VideoItems = props.videos.map(video => {
    console.log(video);
    return <VideoListItem el={video} />;
  });

if you want to log el then do it inside of VideoListItem

1 Like