Utter newbie with react code literacy problem

JavaScript
1

I’m a complete coding noob learning react. I just have a question about how the code below works. I may get some obvious things wrong or confused-- I’m a rank amateur. The below code is from a tutorial, and it works. My question is:

‘this.props.projects’ points to an array of objects (‘projects’) inside a constructor. I cannot make sense of the line:

<ProjectItem key={project.title}project={project} />

My brain interprets what is happening as:

  1. There is a function ‘project’, which is called on each item in the array ‘projects’.
  2. The function returns the value of ‘title’ of each particular item in the array ‘projects’, but it finds that value by referencing itself (‘project’) instead of the array ‘projects’.

This confuses me. How does ‘project.title’ fetch the ‘title’ property of an item in the array ‘projects’? I don’t see how the function ‘project’ has a property at all.

And what is going on with ‘project={project}’? My wild guess is that the function ‘project’ defines itself as an object containing itself, although I suspect that may be gibberish because it makes no sense to me at all.

I understand that these are basic code literacy questions, but the tutorial assumes I understand this and I can’t figure it out on my own. Thanks in advance for helping a noob out. If I omitted critical information just ask and I will try to provide it.

class Projects extends Component {
  render() {
    let projectItems;
    if(this.props.projects){
      projectItems = this.props.projects.map(project => {
        return (
          <ProjectItem key={project.title} project={project} />
        );
      });
    }
    return (
      <div className="Projects">
        {projectItems}

      </div>
    );
  }
}
2

Ah, ok, so:

  1. You have an array of objects (projects)
  2. You use the array method map to iterate through them.
  3. What map does is take an array with items of one kind of thing, and translates item in it to another kind of thing. There’s a 1-to-1 mapping between the original and the new array.
  4. It does that by running a function on every element.
  5. The function here is like function (project) { return <JSXElementWithSomeValuesFromProject /> }. So for each project in projects, convert the object into a JSX element.
  6. Because projects is an array of objects, project just represents one of those objects.
  7. <ProjectItem key={project.title} project={project} /> is creating an instance of the component ProjectItem, and it has two props (just a way to pass values into the component in a controlled way).
  8. key just uses the value of the title field in the object (it is actually just there to suppress/prevent errors, but that’s by the by).
  9. project takes the whole project object (in the ProjectItem component, you then have access to that whole object). It’s a little bit confusing that it’s called the same thing, but it makes sense in context: inside the component, you can then write this.props.project.title and so on.
const projects =
  [ { title: 'Foo', description: 'Lovely foo', image: 'foo.jpg', .... }
  , { title: 'Bar', description: 'Bar stuff', image: 'bar.jpg', ... }
  , ...
  ];

projects.map(project => {
  return { key: project.title, project: project };
});

Will produce

[ { key: 'Foo', project: { title: 'Foo', description: 'Lovely foo', image: 'foo.jpg', .... }
  , { key: 'Bar', project: { title: 'Bar', description: 'Bar stuff', image: 'bar.jpg', ... }
  , ...
  ];
3

I might also add that if you are “a complete coding noob” then maybe React isn’t the best place to start. I think you’d want basic CSS, intermediate HTML, and advanced JavaScript.

It’s a very different way to think, but it builds on those.

1 Like
4

Yeah, I would defo agree with @kevinSmith - what you’re confused on regarding syntax is, when you strip it down , is just basic JS, and I think React is confusing things a bit.

I tried to be as comprehensive as possible in the answer, but it helps to know that React itself is really simple - it’s really clever, but on the surface, the bit you can see here, it’s just basic JS. Buuut React makes it look more complex at first glance. JSX is just basically instances of simple JS objects, but they’re written using that syntax so that it’s easier to read and write the code as if it’s the HTML it will render to.