eolas/neuron/ac6779a0-333b-484d-8504-e6927d39c983/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>