• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

149
Views
Ejecute cada ciclo sobre la clase div en reaccionar

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.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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

almost 3 years ago · Juan Pablo Isaza Report

0

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>) }) }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error