eolas/neuron/f3ec2d6c-97a4-4a7a-9dfe-64824a6e94ae/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>