Quiero que cada vez que haga clic en "addCart" aparezca una nueva del mismo componente (otra Bets>Example Number</Bets aparece en el 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> ) }ha almacenado React Components en su estado, ¡lo cual no es un enfoque adecuado! Recomiendo almacenar una lista de objetos en su lugar y luego verificar su longitud, está vacío, mostrar algún texto (por ejemplo, su cesta está vacía), de lo contrario, asigne esta lista a un componente adecuado de la siguiente manera:
const [state, setState]= useState([]);luego úsalo de la siguiente manera:
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 exampleentonces su usuario puede agregar otro elemento de la siguiente manera:
setState([...state, NEW ITEM]);Probablemente solo deba agregar los objetos almacenados en su useState y no todo el componente JSX.
Luego puedes agregarle valores como
const [cart, setCart] = useState([]) const addStuffToCart = (newItem) => setCart([...cart, newItem])y mapee su carrito para representar todos los artículos en la lista
if (cart.length === 0) return <EmptyCart /> return cart.map(item => <ItemObject item={item} />)