Run each loop over div class in react

user_2822095 0
Viewed 67

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 .

reactjs jquery javascript
2 Answers

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

user_124679930

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>)
 })
}
user_137328270
Related