I want to add "<li>" element to the box element onclick the "innerButton", without needing
to ID any element so I can add as many boxes as I need
but how?
export default class App extends Component {
render()
{
return <>
Home
<BoxA/>
<BoxB/>
<InnerButton name='Enter'/>
</>
}
}
function InnerButton(arr)
{
function addItemToList(newItem)
{
// what to do
}
console.log(arr)
return <input type={'button'} value={arr.name} }
onClick={() => addItemToList('item 2')}
/>
}
function BoxA()
{
return <div id='boxA' >
<ul>
<li>
None.
</li>
</ul>
</div>
}
function BoxB()
{
return <div >
<ul>
<li>
None.
</li>
</ul>
</div>
}
I tried adding useState ,but I can't use it outside the component ,so can I do it without using states?
store an array of items you want to list in the state at the top level (App), and pass a push function to to InnerButton as a prop, and pass the array to the Box elements.
In the Box element map through the array props and render an <li></li> for each element