error in Map functions in react functions

Question

I'm new to react js and i am stuck with this.Please send help..

  const rows = results.map((data, i) => {
    const district=data.districtData;
    const state=data.state;
    return (
      
        <tr
          key={i}
          data-toggle="collapse"
          data-target={`#${data.state}`}
          aria-expanded="false"
          aria-controls="navbarSupportedContent"
          aria-label="Toggle navigation"
        >
          <td>{data.state}</td>
          <td>{data.confirmed}</td>
          <td>{data.active}</td>
          <td>{data.recovered}</td>
          <td>{data.deaths}</td>
        </tr>
        district.map((data, i) => {
          return (
            <tr className=" collapse" id={state} key={data.id}>
              <td>{data.id}</td>
              <td>{data.active}</td>
              <td>Thornton</td>
              <td>@fat</td>
              <td>fad</td>
            </tr>
          );
        }); 
    );
  });

This is my code snippet .I am using [https://api.covidindiatracker.com/state_data.json][1] API for my project I need a table that displays the state details and when the row is clicked the district details should be displayed.I tried to used bootstrap collapse for this..

 const [results, setResults] = useState([]);
  useEffect(() => {
    axios
      .get("https://api.covidindiatracker.com/state_data.json")

      .then((res) => {
        setResults(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

The data from the API is stored in results using the hooks. There is some error in the rows function(syntactical error i guess) Please help me find it and suggest corrections! [1]: https://api.covidindiatracker.com/state_data.json

./src/pages/india.js Line 42:9: Parsing error: Unexpected token, expected "," 40 | <td>{data.deaths}</td> 41 | </tr> > 42 | district.map((data, i) => { | ^ 43 | return ( 44 | <tr className=" collapse" id={state} key={data.id}> 45 | <td>{data.id}</td> — sowmica ML
– sowmica ML, Commented Jul 20, 2020 at 13:19
You should not use the same iterator name. Please check line 1 of your function expression "const rows = results.map((data, i) => {", here "data" is the iterator and later on "district.map((data, i) => {" you're using the same "iterator" name which I guess is creating issue. please let me know, if that's the issue. — fahad tufail
– fahad tufail, Commented Jul 20, 2020 at 13:19

Sarthak Aggarwal · Accepted Answer · 2020-07-20 14:01:55Z

1

You need to enclose javascript code district.map with {} in your JSX.

const rows = results.map((data, i) => {
    const district = data.districtData;
    const state = data.state;
    return (
      <>
        <tr
          key={i}
          data-toggle="collapse"
          data-target={`#${data.state}`}
          aria-expanded="false"
          aria-controls="navbarSupportedContent"
          aria-label="Toggle navigation"
        >
          <td>{data.state}</td>
          <td>{data.confirmed}</td>
          <td>{data.active}</td>
          <td>{data.recovered}</td>
          <td>{data.deaths}</td>
        </tr>


        {
          district.map((value, i) => (
            <tr className=" collapse" id={state} key={data.id}>
              <td>{data.id}</td>
              <td>{data.active}</td>
              <td>Thornton</td>
              <td>@fat</td>
              <td>fad</td>
            </tr>
          )
          )
        }


      </>
    );

  });

Result:

edited Jul 20, 2020 at 14:01

answered Jul 20, 2020 at 13:19

Sarthak Aggarwal

2,3121 gold badge10 silver badges12 bronze badges

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

4 Comments

sowmica ML Over a year ago

same error,shall i send my send code so that u can find the error?

Sarthak Aggarwal Over a year ago

It will be easier that way to debug.

sowmica ML Over a year ago

Here is the github link!Thank you in advance

Sarthak Aggarwal Over a year ago

Cheers @sowmicaML, just on the side note, you are getting a lot of warning in console regarding same key. You might want to make unique key maybe using index with id or value otherwise there might be a performance hit.

Collectives™ on Stack Overflow

error in Map functions in react functions

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related