Project Passing Thoughts, question about this code that passes values to props

Hello everyone, I am currently working on the “Passing Thoughts” project in the React section of the fullstack career path. Here is the link to the project: Passing Thoughts

I have a question about some code that I don’t quite understand. In the Thoughts.js file, I see this code written in the Thoughts function component:

export function Thought(props) {
  const { thought, removeThought } = props; // I don't understand what this does

In const { thought, removeThought } = props; are we doing this so we can access these passed properties? Are we passing these as objects to props? Why is it necessary to write this code? If we wanted to access passed props, couldn’t we just write props.(name of the passed prop)? For example in the case of accessing removeThought(), couldn’t we write it like this:

const handleRemoveClick = () => {
    props.removeThought(thought.id);
  };

instead of

const handleRemoveClick = () => {
    removeThought(thought.id);
  };

as a way to access the property? Any help is appreciated. Take care everyone and happy coding :slight_smile:

Yes, you’re right. We could just say props.thought and props.removeThought.

This is called destructuring. It works with arrays also.

1 Like

To even avoid less code, we can refactor this:

to be:

export function Thought({thought, removeThought}) {
  console.log(thought, removeThought)
1 Like

Hi @odunsi Thanks for the response. This is really helpful! Thanks for sharing the link on destructuring as well. I’ll go ahead and read up on it! All the best :slight_smile: