I can partially display my content (displaying firstName instead of firstName and lastName)

Question

how can I do to display firstName and lastName for People and Invitees colums? Because for now I can display firstName for column People (ie Eliot instead of Eliot Gray ); for column Invitees -> firstName and lastName are attached together (ie Paul Poel instead of PaulPoel ) .

export default function Meeting() {
  ...
  const data = useMemo(
    () => [
      {
        Header: "Id",
        accessor: (row) => row.id
      },
      {
        Header: "People",
        accessor: (row) => row.people[0].firstName && row.people[0].lastName
      },
      {
        Header: "Invitees",
        accessor: (row) => row.invitees,
        Cell: (props) =>
          props.value !== [] && props.value.length > 0 ? (
            <div>
              {props.value !== []
                ? props.value
                    .map(({ firstName, lastName }) => firstName && lastName)
                    .join(", ")
                : ""}
              {props.value.length > 0 && (
                <CloseIcon
                  text={
                    props.value !== []
                      ? props.value.map((o) => (
                          <span key={o.firstName}>
                            <b>{o.firstName}</b>
                            <b>{o.lastName}</b>
                          </span>
                        ))
                      : ""
                  }
                />
              )}
            </div>
          ) : (
            ""
          )
      }
    ],
    []
  );

  return (
    <Table
      data={meeting}
      columns={data}          
    />
  );
}

My json :

{
  "meeting": [
    {
      "id": 1,
      "people": [
        {
          "firstName": "Eliot",
          "lastName": "Gray"
        },
        ...
      ],
      "invitees": [
        {
          "firstName": "Paul",
          "lastName": "Poel"
        },
        ...
      ]
    }
  ]
}

Answer 1

If you want display firstName and lastName together for People , append the names and return it.

Same goes for Invities too, instead of using && use + to append and return it. && will return the value of last operand until it turns false

According to MDN Docs

The logical AND (&&) operator (logical conjunction) for a set of boolean operands will be true if and only if all the operands are true. Otherwise it will be false. More generally, the operator returns the value of the first falsy operand encountered when evaluating from left to right, or the value of the last operand if they are all truthy.

{
  Header: "People",
  accessor: (row) => row.people[0].firstName + " " + row.people[0].lastName
}