Run each loop over div class in react-CodePudding

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 >
    <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" >Click Me!</button>
</div>
<div >
    <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" >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 .

CodePudding user response：

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

CodePudding user response：

You can use following syntax


{[1,2,3,4].map((val, index) => {
  // add condition here
  // if (condition) {
  // return null;
  // }

  return (
   <div  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" >Click Me!</button>
 </div>)
 })
}