CODEWITHSUNDEEP
javascriptreactjs
Santhosh Reddy
Santhosh Reddy

Reputation: 135

React js converting closing tags to unreachable code when i try to add jsx or markup in middle

I am learning react-js, this is my code, when i am trying to add either markup or jsx in the given space 'write code', my editor is showing syntax errors and disabling closing div tags, and throwing unreachable code error, in few cases it asking to close form tag though it already closed.

render() {
    const {patientsList} = this.state;

    return (
      <div style={{ height: "100%" }}>
          <NavBar />
        <form style={{ display: "flex", height: "100%", alignItems: "center" }}>
          { patientsList.length === 0 ? (
            <h1 style={{ textAlign: "center", flexGrow: "1" }}>
              No Patients Found
            </h1>
          ) : (
          {/*Write code here to create all patients details*/}
          // <table>
          //  <tr><th>id</th><th>name</th><th>email</th><th>dob</th><th>location</th><th>mobile</th></tr>
          // </table>
          )}
        </form>
      </div>
    );
 }

The table tag section was deliberately commented by me to post that section here. I would like to know my mistake and like to find out what is the main reason for this and how to avoid such issues in the future.

Upvotes: 0

Views: 177

Answers (3)

user8082655
user8082655

Reputation:

Use it like that:

render() {
    const {patientsList} = this.state;

    return (
      <div style={{ height: "100%" }}>
          <NavBar />
        <form style={{ display: "flex", height: "100%", alignItems: "center" }}>
          { patientsList.length === 0 ? (
            <h1 style={{ textAlign: "center", flexGrow: "1" }}>
              No Patients Found
            </h1>
          ) : (
          <>
            <div>Any info here</div>
            <table>
             <tr><th>id</th><th>name</th><th>email</th><th>dob</th><th>location</th><th>mobile</th></tr>
             </table>
           </>
          )}
        </form>
      </div>
    );
 }

You must always return one and only one node in JSX, in your case you have 2 nodes: table and div. So in order to make a single node, you can use <> </> or React.Fragment. You can find more info here

Upvotes: 0

shai_sharakanski
shai_sharakanski

Reputation: 417

Try to remove the {} from this code:

const { patientsList } = this.state;

  return (
    <div style={{ height: "100%" }}>
      <NavBar />
      <form style={{ display: "flex", height: "100%", alignItems: "center" }}>
        {patientsList.length === 0 ? (
          <h1 style={{ textAlign: "center", flexGrow: "1" }}>
            No Patients Found
          </h1>
        ) : (
          <div>Write code here!</div>
            /*Write code here to create all patients details*/
          // <table>
          //  <tr><th>id</th><th>name</th><th>email</th><th>dob</th><th>location</th><th>mobile</th></tr>
          // </table>
        )}
      </form>
    </div>
  );

Upvotes: 1

Hemant Parashar
Hemant Parashar

Reputation: 3774

// is not a syntax for comments in jsx. You have to add the comments like

{/*

  ... Commented Code

*/}

So do this

render() {
    const {patientsList} = this.state;

    return (
      <div style={{ height: "100%" }}>
          <NavBar />
        <form style={{ display: "flex", height: "100%", alignItems: "center" }}>
          { patientsList.length === 0 ? (
            <h1 style={{ textAlign: "center", flexGrow: "1" }}>
              No Patients Found
            </h1>
          ) : (
          {/*Write code here to create all patients details
           <table>
            <tr><th>id</th><th>name</th><th>email</th><th>dob</th><th>location</th> 
            <th>mobile</th></tr>
           </table>
           */}
          )}
        </form>
      </div>
    );
 }

Upvotes: 0

Related Questions