0
175
VisualizaçõesCómo representar un componente para un elemento particular en una matriz
Tengo una matriz, para la cual un componente ( <span>Delete</span> en mi caso) debe mostrarse solo si la longitud de la matriz es mayor que 2 y también, no se muestra en los dos primeros elementos de la matriz pero se muestra en otros elementos .
Ejemplo: matriz = ["Uno","Dos","Tres","Cuatro"] Mostrar <span>Delete</span> en "Tres" y "Cuatro" ya que la matriz es mayor que la longitud 2. En lo anterior caso, incluso si la matriz es mayor que la longitud 2, no se muestra en los dos primeros elementos ("Uno" y "Dos").
Código:
const App = () => { const [element, setElement] = useState(["element"]); return ( <> {element.map((e) => ( <div> <span>{e}</span> {element.length > 2 && <span style={{color:"red"}}>{" "}Delete</span>} </div> ))} <button onClick={() => setElement((element) => [...element, "element"])}>Add</button> </> ); };El código anterior muestra el texto "Eliminar" en todos los elementos
en cambio, debería mostrarse solo para los elementos después del segundo índice.
CodeSandbox: https://codesandbox.io/s/basic-antd-4-16-9-forked-2w3lg5?file=/index.js:98-478
3 Respostas
Responde à pergunta0
Use el índice del elemento sobre el que está iterando (el segundo argumento en la devolución de llamada .map ) para verificar si el índice es 2 o más; si es así, puede mostrar la eliminación; de lo contrario, no la muestre.
const App = () => { const [elements, setElements] = useState(["element"]); return ( <> {elements.map((e, i) => ( <div> <span>{e}</span> {elements.length > 2 && i >= 2 && <span style={{color:"red"}}>{" "}Delete</span>} </div> ))} (Debido a que el estado es una matriz, hacer que su nombre sea plural tiene mucho más sentido que un element singular, que suena como un elemento de matriz)
0
puedes hacer algo como esto
{element.length > 2 && element.map((ele,index) => { if(index > 1){ return <p>{ele}</p> } else{ return <></> } })}0
También debe verificar si el índice del elemento actual es mayor que 1 .
const App = () => { const [element, setElement] = React.useState(["element"]); return ( <React.Fragment> {element.map((e, i) => ( <div> <span>{e}</span> {i > 1 && element.length > 2 && <span style={{ color: "red" }}>Delete</span>} </div> ))} <button onClick={() => setElement((element) => [...element, "element"])}> Add </button> </React.Fragment> ); }; ReactDOM.render(<App />, document.getElementById("root")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>