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

0

148
Views
Run each loop over div class in react

I am very new in react, so I am not able to understand how to run loop over div in React .Is it like same as we do in 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>

For that we do jquery like this

$(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
        }
    });
});

but in case of react how to do this validation if I have the same scenario inside one component .

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

0

You need to use map in react js instead of each. In the below code, I have create a array with useState. And I have used it to loop inside the component. You can see loopVal.map is used to loop the content.

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>
  );
}

If you need any more clarification, You can create a react app using npx create-react-app appname and copy and paste the above code in the App.js file. You will be able to understand much better.

The one thing you should understand is Jquery is different and React Js is different. So I would suggest you not to keep Jquery in mind and learn React Js.

I have shared the sandbox link below,

https://codesandbox.io/s/sleepy-cookies-ws3sc0?file=/src/App.js

almost 3 years ago · Juan Pablo Isaza Report

0

You can use following syntax


{[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