In a pure functional component using typescript how do we render an array of strings into an unordered list?
import React from 'react';
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
<li>Water<li/>
<li>Orange Juice<li/>
<li>Milk<li/>
</ul>
);
}
export { Drinks };
You can use map as the children:
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
{myArray.map(o => <li key={o}>{o}</li>)}
</ul>
);
}
export { Drinks };
Note key = {o} is necessary to help react uniquely identify an element for updates. This assumes strings are unique in the array.
any I get the error Cannot find name 'o'.o is string as expected. This should be inferred based on the type of myArray which in this case in inferred from the initialization. If myArray is typed as any you might get this error, but this is not realted to the question or the answer.import React from 'react';
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
{myArray.map((item:string, index:number)=><li key={index}>{item}</li>)}
/* using index number as key is not recommendable.
But in this case, it doesn't matter.*/
</ul>
);
}
export { Drinks };
import React from 'react';
const Drinks: React.FC = () => {
const myArray = ['Water', 'Orange Juice', 'Milk'];
return (
<ul>
{ myArray.map( (drink,index) => (<li key={index} >{drink}</li>)) }
</ul>
);
}
export { Drinks };
you can use map for rendering array like
<ul>
{myArray.map((arr,i) =>
return <li key={i}>{arr}</li>
)
</ul>
