Soy muy nuevo en reaccionar, por lo que no puedo entender cómo ejecutar loop over div en React. ¿Es igual que lo hacemos en Jquery?
<div class="muclass"> <select name="rooms" id="rooms"> <option value="1">1</option> </select> <select name="rooms" id="rooms"> <option value="1">1</option> <option value="2">2</option> </select> <button type="button" class="mybutton">Click Me!</button> </div> <div class="muclass"> <select name="rooms" id="rooms"> <option value="1">1</option> </select> <select name="rooms" id="rooms"> <<option value="1">1</option> <option value="2">2</option> </select> <button type="button" class="mybutton">Click Me!</button> </div>Para eso hacemos jquery así
$(document).ready(function(){ var totalCount =4; $('.mybutton').click( function() { var elem = 'div'; var hotel = $(this).closest(elem + '.muclass'); var foundRooms =0; $('select.rooms', hotel).each(function() { foundRooms += parseInt($(this).val(), 10); }); if(totalCount != foundRooms) { /*Throw an error */ return } }); });pero en caso de reaccionar, cómo hacer esta validación si tengo el mismo escenario dentro de un componente.
Debe usar el map en reaccionar js en lugar de each . En el siguiente código, he creado una matriz con useState . Y lo he usado para hacer un bucle dentro del componente. Puede ver que loopVal.map se usa para reproducir el contenido.
import "./styles.css"; import { useState } from "react"; export default function App() { const [loopVal, setLoopval] = useState(["loop1", "loop2", "loop3"]); return ( <div className="App"> {loopVal.map((loop) => { return ( <div className="muclass"> {loop} <select name="rooms" id="rooms"> <option value="1">1</option> </select> <select name="rooms" id="rooms"> <option value="1">1</option> <option value="2">2</option> </select> <button type="button" className="mybutton"> Click Me! </button> </div> ); })} <div className="muclass"> <select name="rooms" id="rooms"> <option value="1">1</option> </select> <select name="rooms" id="rooms"> <option value="1">1</option> <option value="2">2</option> </select> <button type="button" className="mybutton"> Click Me! </button> </div> </div> ); } Si necesita más aclaraciones, puede crear una aplicación de reacción usando npx create-react-app appname y copie y pegue el código anterior en el archivo App.js. Podrás entender mucho mejor.
Lo único que debe comprender es que Jquery es diferente y React Js es diferente. Por lo tanto, le sugiero que no tenga en cuenta Jquery y aprenda React Js.
He compartido el enlace de sandbox a continuación,
https://codesandbox.io/s/sleepy-cookies-ws3sc0?file=/src/App.js
Puedes usar la siguiente sintaxis
{[1,2,3,4].map((val, index) => { // add condition here // if (condition) { // return null; // } return ( <div class="muclass" data-count={val}> <select name="rooms" id="rooms"> <option value="1">1</option> </select> <select name="rooms" id="rooms"> <<option value="1">1</option> <option value="2">2</option> </select> <button type="button" class="mybutton">Click Me!</button> </div>) }) }