eolas/neuron/1db7cff2-4b98-4e94-9a89-ccce8e8a4c6f/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>