eolas/neuron/0c4abb9b-c940-4636-84e0-b880b7c1ac8b/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>