JSX map function, using index parameter, does not pass the index but rather the whole object

Question

The following component is meant to represent a table with lines that each contain line numbers, text, and some structure.

The variable text is meant to take a list of objects. Each object may represent a single line, or it may represent a "subproof" which would be another table containing lines and so on. It is then supposed to map each line to a Line component, and each subproof to a Subproof component.

import Line from './Line'

const Subproof = ({proof_lines, depth}) => {
    const text = proof_lines.map( (line, index) => (
      console.log(index),
      line.hasOwnProperty("statement") 
        ? <Line 
            key={index} 
            line_num={index} 
            depth={depth} 
            statement={line.statement} 
            reason={line.reason} 
          /> 
        : <div key={index}>False</div>
    ));
  return (
    <div className="subproof">
      {text}
    </div>
  );
};

export default Subproof;

When I log the index, it works exactly as I expect: It tells me the index of the object in the list. But, when I go over to the Line object, where I've passed this in as a prop ...

const Line = (line_num, depth, statement, reason) => {
  return <div className="Line">
      {console.log(line_num)}
      <div className="Line_num">{line.num}</div>
  </div>;
};

export default Line;

This gets logged not as the index but as the object itself. Naturally that then causes an error when it tries to build the page because what I'm inserting into the HTML is an object, rather than what I intended which was a simple number.

Hanchen Jiang · Accepted Answer · 2022-01-23 20:05:38Z

1

prop of a component needs to be an object:

const Line = ({line_num, depth, statement, reason}) => {
  ...
}

answered Jan 23, 2022 at 20:05

Hanchen Jiang

2,6702 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Addem Over a year ago

Wow, and I just made that same mistake yesterday. I'll drill it in my head eventually, but sorry for the dumb question! And thanks for the answer!

Collectives™ on Stack Overflow

JSX map function, using index parameter, does not pass the index but rather the whole object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related