I want to everytime i click on "addCart" appear a new of the same component ( another Bets>Example Number</Bets appears on the DOM).
const newBet: React.FC = () => {
const [getAddCart, setGetAddCart] = useState([
<BetsEmpty>Empty Cart</BetsEmpty>,
]);
function addCart() {
setGetAddCart([
<Bets>
Example Number
</Bets>,
]);
}
return(
<AllBets>{getAddCart}</AllBets>
<Button onClick={addCart}></Button>
)
}
you have stored React Components in your state which is not a suitable approach!
I recommend to store a list of objects instead and then check its length, it's empty`, show some text (e.g. your basket is empty), else map this list to a suitable component as follow:
const [state, setState]= useState([]);
then use it as follow:
state.length === 0? <h1>your basket is empty</h1>:
state.map(item=><h1>{item}</h1>) //if your item is String, if not u can provide more complicated component, its just an example
then your user can add another item as follow:
setState([...state, NEW ITEM]);
You probably just should add the stored objects in your useState and not the whole JSX component.
Then you can add values to it like
const [cart, setCart] = useState([])
const addStuffToCart = (newItem) => setCart([...cart, newItem])
and map your cart to render all items in the list
if (cart.length === 0) return <EmptyCart />
return cart.map(item => <ItemObject item={item} />)