Functional component and return statement in ReactJS

Question

I'm getting a weird error of unreachable code detected in the return statement of ReactJS.

In the code snippet given below, the error is shown at the div with the button component.

How can I resolve this issue?

function RenderComments({ comments }) {
    return (
        comments.map((comment) =>
            <div>
                <ul className="list-unstyled">
                    <li className='font-quote'>{comment.comment}</li>
                </ul>
                <ul className="list-unstyled">
                    <li className='font-author'>--{comment.author}, {comment.date}</li>
                </ul>
            </div>
        )
        <div className = "row m-1" >
            <Button type="submit" value="submit"><i className="fa fa-pencil"></i> Submit Comment</Button>
        </div>   
    );
}

That's an invalid code... You're out of the return statement you're using row m-1. Kindly check my answer for a working code. — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Aug 14, 2020 at 9:14

Praveen Kumar Purushothaman · Accepted Answer · 2020-08-14 09:15:14Z

2

That's an invalid code... You're out of the return statement you're using row m-1.

You need to use <></> fragments to return two or more elements:

function RenderComments({ comments }) {
  return (
    <>
      {comments.map((comment) => (
        <div>
          <ul className="list-unstyled">
            <li className="font-quote">{comment.comment}</li>
          </ul>
          <ul className="list-unstyled">
            <li className="font-author">
              --{comment.author}, {comment.date}
            </li>
          </ul>
        </div>
      ))}

      <div className="row m-1">
        <Button type="submit" value="submit">
          <i className="fa fa-pencil"></i> Submit Comment
        </Button>
      </div>
    </>
  );
}

answered Aug 14, 2020 at 9:15

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

2 Comments

Nimrod Over a year ago

How am I returning two or more elements?

Praveen Kumar Purushothaman Over a year ago

@Nimrod After the return ( .... ) you have another <div className="row m-1">, that's why. :)

Lafi · Accepted Answer · 2020-08-14 09:14:52Z

2

The div containing the Button is not reachable, you should wrap both in a grouping tag, a fragment for example:

function RenderComments({ comments }) {
  return (
    <>
      {comments.map((comment) => (
        <div>
          <ul className="list-unstyled">
            <li className="font-quote">{comment.comment}</li>
          </ul>
          <ul className="list-unstyled">
            <li className="font-author">
              --{comment.author}, {comment.date}
            </li>
          </ul>
        </div>
      ))}
      <div className="row m-1">
        <Button type="submit" value="submit">
          <i className="fa fa-pencil"></i> Submit Comment
        </Button>
      </div>
    </>
  );
}

answered Aug 14, 2020 at 9:14

Lafi

1,3521 gold badge16 silver badges19 bronze badges

Comments

simbathesailor · Accepted Answer · 2020-08-14 09:14:41Z

1

function RenderComments({ comments }) {
  return (
    <>
      {comments.map((comment) => (
        <div>
          <ul className="list-unstyled">
            <li className="font-quote">{comment.comment}</li>
          </ul>
          <ul className="list-unstyled">
            <li className="font-author">
              --{comment.author}, {comment.date}
            </li>
          </ul>
        </div>
      ))}

      <div className="row m-1">
        <Button type="submit" value="submit">
          <i className="fa fa-pencil"></i> Submit Comment
        </Button>
      </div>
    </>
  );
}

answered Aug 14, 2020 at 9:14

simbathesailor

3,6852 gold badges22 silver badges30 bronze badges

Collectives™ on Stack Overflow

Functional component and return statement in ReactJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related