how to write script inside jsx?-CodePudding

I'm trying to display data using table in my react js project but it gives an error Unexpected token, expected ":". what's the correct way of writing this code?

any help is appreciated.

here's my problematic code:

return (
<div className="mb-4">
{
  toko.length > 0 
  ? (
    <Table striped>
      <thead>
        <tr>
          <th className="ps-3">Info Toko</th>
          <th className="text-center">Action</th>
        </tr>
      </thead>
      <tbody>
        {toko.map((item, index) => {
          return (
          <tr key={index}>
            <td>
              <Link to={`/view_toko/${item.id}`}>
                <label className="fs-5">{item.nama}</label>
              </Link>
            </td>
            <td>
              <div className="text-center">
                <Button onClick={() => onSelect(item.id)} variant="info" className="mb-2">Pilih</Button>
              </div>
            </td>
          </tr>
        )}
      </tbody> // the error points to this line
    </Table>
    )

  ) : (
    <div>
      <em>No data</em>
    </div>
  )
}
</div>
)

CodePudding user response：

You had a few syntax errors.

Code should be.. I did this on my phone so double check and let me know.

return (
<div className="mb-4">
{
  toko.length > 0 
  ? (
    <Table striped>
      <thead>
        <tr>
          <th className="ps-3">Info Toko</th>
          <th className="text-center">Action</th>
        </tr>
      </thead>
      <tbody>
        {toko.map((item, index) => {
          return (
          <tr key={index}>
            <td>
              <Link to={`/view_toko/${item.id}`}>
                <label className="fs-5">{item.nama}</label>
              </Link>
            </td>
            <td>
              <div className="text-center">
                <Button onClick={() => onSelect(item.id)} variant="info" className="mb-2">Pilih</Button>
              </div>
            </td>
          </tr>
          )
        )}
      </tbody> 
    </Table>
    )
})
 : (
    <div>
      <em>No data</em>
    </div>
  )
}
</div>

CodePudding user response：

Return and map function brackets were missing.

  return (
    <div className="mb-4">
      {toko.length > 0 ? (
        <Table striped>
          <thead>
            <tr>
              <th className="ps-3">Info Toko</th>
              <th className="text-center">Action</th>
            </tr>
          </thead>
          <tbody>
            {toko.map((item, index) => {
              return (
                <tr key={index}>
                  <td>
                    <Link to={`/view_toko/${item.id}`}>
                      <label className="fs-5">{item.nama}</label>
                    </Link>
                  </td>
                  <td>
                    <div className="text-center">
                      <Button
                        onClick={() => onSelect(item.id)}
                        variant="info"
                        className="mb-2"
                      >
                        Pilih
                      </Button>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </Table>
      ) : (
        <div>
          <em>No data</em>
        </div>
      )}
    </div>
  )