Create a new `div` component for a child element when the button is clicked in ReactJS

Question

Create a new `div` component for a child element when the button is clicked in ReactJS

I am attempting to incorporate a child div component (div-col inside of div-row) when the button is clicked. In this case, I am changing the card layout from grid to list view using Bootstrap classes.

If the current view is set to grid view:

<div className="row">
  {notes.map((item, key) => {
    return <Noteitem />;
  })}
</div>

On clicking the button for listview:

<div className="row">
  <div className="col"> 
    {notes.map((item, key) => {
      return <Noteitem />;
    })}
  </div> 
</div>

Do I need to handle separate DOM return statements for both cases? Open to suggestions for alternative approaches as well.

javascript html css reactjs bootstrap-4

Answer 1

Answer №1

Define a state called myView with a default value of 'GridView'. When the listView button is clicked, update the state to 'ListView'.

To use this state, render the following:

{
  myView === "GridView" ? (
    <div className="row">
        {notes.map((item, key) => {
          return <Noteitem />;
        })}
    </div>
  ) : (
    <div className="row">
      <div className="col">
        {notes.map((item, key) => {
          return <Noteitem />;
        })}
      </div>
    </div>
  );
}

Answer 2

Define a state called myView with a default value of 'GridView'. When the listView button is clicked, update the state to 'ListView'.

To use this state, render the following:

{
  myView === "GridView" ? (
    <div className="row">
        {notes.map((item, key) => {
          return <Noteitem />;
        })}
    </div>
  ) : (
    <div className="row">
      <div className="col">
        {notes.map((item, key) => {
          return <Noteitem />;
        })}
      </div>
    </div>
  );
}

Answer 3

Answer №2

Following @Bee's answer, but with a more concise and detailed approach:

const [grid, setGrid] = useState(false)

return (
    <button onClick={() => setGrid(!grid)} />
    <div className="row">
       <div className={grid ? "col" : ""}> 
         {notes.map((item, key) => {
            return <Noteitem  />;
         })}
      </div> 
    </div>
)

Description

This code snippet keeps the div element in the document object model (DOM) and dynamically switches between the classes col and null. By toggling the grid view on and off using the onClick attribute of the button, the state value remains as a Boolean for easy reference. The ternary operator is utilized to assign the appropriate className value to the div.

Answer 4

Following @Bee's answer, but with a more concise and detailed approach:

const [grid, setGrid] = useState(false)

return (
    <button onClick={() => setGrid(!grid)} />
    <div className="row">
       <div className={grid ? "col" : ""}> 
         {notes.map((item, key) => {
            return <Noteitem  />;
         })}
      </div> 
    </div>
)

Description

This code snippet keeps the div element in the document object model (DOM) and dynamically switches between the classes col and null. By toggling the grid view on and off using the onClick attribute of the button, the state value remains as a Boolean for easy reference. The ternary operator is utilized to assign the appropriate className value to the div.

Create a new `div` component for a child element when the button is clicked in ReactJS

Answer №1

Answer №2

Description

Similar questions

The slider causing conflicts with widgets and content positioned below it in an HTML layout

How to align text to the bottom of a div using CSS

FireFox is causing issues with both ng-view and Angular functions, rendering them unusable

What is the best way to locate an item reference for a specific DOM element?

Utilizing SQL with PHP for Dynamically Populating an HTML Dropdown Menu

Is there a way to detect browser errors using JavaScript or Angular 2?

Transferring information among PHP web pages using a list generated on-the-fly

Tips for properly including my Dialog Flow access token in the environment file within the Angular CLI

The Checkbox generated by Javascript is failing to properly close the tag

Unable to load routes from ./app.js in the file ./src/routes/index.js

Personalized color scheme for calendar td

Clicking an AngularJS button within a form is causing an unexpected page refresh

The OrhographicCamera is having difficulties capturing the entire scene in its render

How to center a div with a overlay in CSS?

How can you use C# code to control the visibility of a table row in HTML?

Utilizing Redux with React to fetch and handle JSON data from given API endpoint

Setting the minimum supported screen size in MUI/ReactJS: A comprehensive guide

Please refresh the page in order to utilize the newly updated cookies

Running a setTimeout function within the context of a jQuery each

What is the best way to display loading details during a data loading process within a useEffect hook?