Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React – Why is the output different? Is it regarding destructuring of props?

  • Object Object that I will be passing into components

      const parts = {
      part1: {
          name: 'Fundamentals of React',
          exercises: 10
      },
          part2: {
          name: 'Using props to apss data',
          exercises: 7
      },
      part3: {
          name: 'State of a component',
          exercises: 14
      }
  }

  • 1) Version 1 of Components Content & Part

      const Content = ({content}) => {
      return (
          <div>
              <Part name={content.part1.name} exercises={content.part1.exercises} />
              <Part name={content.part2.name} exercises={content.part2.exercises} />
              <Part name={content.part3.name} exercises={content.part3.exercises} />
          </div>
      )
  }

  const Part = ({name, exercises}) => {
      return (
          <div>
              <p>{name} {exercises}</p>
          </div>
      )
  }

  • 2) Version 2 of Components Content & Part

      const Content = (content) => {
      return (
          <div>
              <Part parts={content.part1} />
              <Part parts={content.part2} />
              <Part parts={content.part3} />
          </div>
      )
  }

  const Part = (parts) => {
      return (
          <div>
              <p>{parts.name} {parts.exercises}</p>
          </div>
      )
  }

Tried out a new React course and did not understand why code 1) worked in displaying the output but 2) did not work. Anyone care to enlighten more on destructuring the prop received and what edits can I make to 2) to make it have the same display as 1) Thank you!

Tags:

2

Answers


  1. 0

    In your first example, you’re passing name and exercises props to the component, and you’re destructuring them from the props object passed to the component.

    In your second example, you’re passing a parts prop to the component but not destructuring, so your parts parameter refers to the props object, not to the parts prop.

    So basically, yes, you should be destructuring in the second option (as in the first) if you want to access the parts prop you’re passing.

    Perhaps somewhat tangential, but if you were trying to make the usage of the Part component less verbose, you could use spread notation since your parts objects directly have the name and exercises props (and no other props):

    const Content = ({content}) => {
    return (
        <div>
            <Part {...content.part1} />
            <Part {...content.part2} />
            <Part {...content.part3} />
        </div>
    );
};

const Part = ({name, exercises}) => {
    return (
        <div>
            <p>{name} {exercises}</p>
        </div>
    );
};

    But it’s probably best to do that only when you know the parts objects will have only the props the component expects. Components ignore extra props, but it’s still not ideal to pass them things they won’t use.

    Login or Signup to reply.
  2. 0

    React components work in this way: A functional component expects a props argument, which is an object. In case you don’t pass any props to the component, the props object is just an empty object.

    Version 1 of your code works because the Content component expects a prop called content, which you are destructuring like this:

    const Content = ({content}) => {
    return (
        <div>
            <Part {...content.part1} />
        </div>
    );
};

    The same component can be rewritten like this if you don’t use the destructuring technique:

    const Content = (props) => {
    return (
        <div>
            <Part {...props.content.part1} />
             ...
        </div>
    );
};

    Notice that once you don’t use the destructuring technique, every prop you pass becomes a property of the props object.

    So, your version 2 won’t work because while you are allowed to name your first argument of the React function as you want, you have to understand that it will be passed as props. Thus, the Content component refers to the props as content and can be refactored like this:

    const Content = (content) => {
      return (
          <div>
              <Part parts={content.content.part1} />
              ...
          </div>
      )
  }

    Technically, the above code will work, but it is not readable. Notice how content is chained to another content content.content.

    Instead, you could adopt naming the first parameter of the functional component as props, which makes it more readable. So, your version 2 would be like this:

    const Content = (props) => {
      return (
          <div>
              <Part parts={props.content.part1} />
              ...
          </div>
      )
  }

  const Part = (props) => {
      return (
          <div>
              <p>{props.parts.name} {props.parts.exercises}</p>
          </div>
      )
  }

    And now, the only difference between version 1 and 2 is that version 1 is using the destructuring technique, while version 2 is not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search