Earlier my component had only one level of subpoint so,
it would look like
main point 1
- subpoint 1
- subpoint 2
main point 2
- subpoint 1
For this my code looked like this
interface PointCardProps {
pointData: {
mainPoint: string
subPoint: string[]
}[]
}
export const singleNest = (props:PointCardProps) => {
return(
<ol>
{props.pointData.map((value) => {
return (
<>
<li>
<div>
{value.mainPoint}
<div>
<ul>
{value.subPoint.map((point) => {
return <li>{point}</li>
})}
</ul>
</div>
</div>
</li>
</>
)
})}
</ol>
)
}
How can I change the component in such a way that it can have any amount of levels
eg: main point 1
- sub point 1
- sub point 2
- sub point 2.1
- sub point 2.2
- sub point 2.2.1
- sub point 2.2
- sub point 2.1
need to start with changing interface, please help
Here you have recursive react component with recursive props: