eolas/neuron/dc239556-fd21-4147-b56e-3d8b474984ad/Functions.md

tags
typescript react

Functions

Continuing from the other examples of React Typescript, we could do standard listing function, like:

<ul>
  {people.map((person) => {
    return <li>{person.name}</li>;
  })}
</ul>

But it's neater to do it with a function defined within the List component:

const renderList = (): JSX.Element[] => {
  return people.map((person) => {
    return (
      <li>
        <div>{person.name}</div>
        <div>{person.age}</div>
      </li>
    );
  });
};

And then change the eariler list to a function invocation:

    <ul>{renderList()}<ul>