0
200
Vistas¿Cómo puedo mostrar un botón HTML usando el retorno de una función de JavaScript?
Intento que mi función devuelva etiquetas de botón HTML que se mostrarán en la página de la siguiente manera:
(sin la cosa flotante)
El problema es que como pueden ver cada fila tiene botones diferentes, entonces quise hacer una función que tome en el parámetro la "categoría" de la fila, por ejemplo la fila "Juegos" tiene 2 botones: Modificar y Eliminar.
Aquí está mi código javascript:
function Category(cat) { if (cat == "games") { let innerhtml = `<div className='game_buttons'> <button className='modify'>Modify</button> <button className='delete'>Delete</button> </div>` return innerhtml } if (cat == "upcoming") { let innerhtml = `<div className='game_buttons'> <button className='released'>Released</button> <button className='modify'>Modify</button> <button className='delete'>Delete</button> </div>` return innerhtml } if (cat == "featured") { let innerhtml = `<div className='game_buttons'> <button className='delete'>Delete</button> </div>` return innerhtml } }Coloqué esa misma función donde necesito que se muestre, así:
<div className='game_buttons'> {Category("games")} </div> Pero me sale esto: 
Entonces, ¿cómo podría mostrar estos botones en lugar de solo obtener las etiquetas HTML como texto?
1 Respuestas
Responde la pregunta0
React hace que la inyección de cadenas HTML sea engorrosa a propósito para tratar de guiarlo hacia "pensar en React".
Aquí, esto significa simplemente crear otro componente que represente condicionalmente el contenido que desea como JSX .
function Category(props) { if (props.cat === "games") { return ( <div className="game_buttons"> <button className="modify">Modify</button> <button className="delete">Delete</button> </div> ); } if (props.cat === "upcoming") { return ( <div className="game_buttons"> <button className="released">Released</button> <button className="modify">Modify</button> <button className="delete">Delete</button> </div> ); } if (props.cat === "featured") { return ( <div className="game_buttons"> <button className="delete">Delete</button> </div> ); } } Luego, renderice Category y pase su accesorio de cat :
<Category cat="games" />