A local function is defined inside a functional component, where it can use component-local information without receiving every value as an argument. section 4.4.3
Choose between these two conversion patterns:
- Use a pure function outside the component when its inputs can be passed clearly as arguments. section 4.4.3
- Use a local function when passing many component properties would make the call more complex and less isolated. section 4.4.3
Listing 4.15 Gallery v3 using functions (excerpt)
...
function Image({ index, title }) {
const getImageSource = () => #1
`//picsum.photos/id/${index}/150/150/`; #1
return (
<figure style={{ margin: "5px" }}>
<img src={getImageSource()} alt={title}/> #2
<figcaption>
<h3>Species: {title}</h3>
</figcaption>
</figure>
);
}
...
The Image component defines getImageSource inside itself, allowing the function to read index directly and keeping the JSX call compact. section 4.4.3
