Question 261386 in Html Question posted in
Some basic documentation can be found here.

Html – Arranging 3 elements in one side and 3 elements in another side in react

In react, I have component(anchor component) which we are getting response from an api as array of objects. From payload I’m requesting 6 objects.I want to arrange 3 in one side and another 3 beside that. Now I’m getting all in 1 side. How to arrange this. Can someone please help?

Not able to proceed with anything specific

Tags:

2

Answers


  1. 0

    To arrange the 6 objects from your API response into two rows of 3 objects each, you can use React’s component rendering to create the desired layout. Here’s a step-by-step guide on how to achieve this:

    Assuming you have an array of objects named apiResponse

    Login or Signup to reply.
  2. 0

    I wrote a small example that might help you:

    import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const values = [
  {
    a: 1,
  },
  {
    a: 2,
  },
  {
    a: 3,
  },
  {
    a: 4,
  },
  {
    a: 5,
  },
  {
    a: 6,
  },
]


function App() {
  return (
    <div className="App">
      <div style={{display: 'flex', width: '100%', justifyContent: 'space-around'}}>
        <div style={{display: 'flex', flexDirection: 'column'}}>
          {values.slice(0, values.length / 2).map((val, index) => (
            <div>{val.a}</div>
          ))}
        </div>
        <div style={{display: 'flex', flexDirection: 'column'}}>
          {values.slice(values.length / 2).map((val, index) => (
            <div>{val.a}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

    Here’s how it should look in the end:
    enter image description here

    In the above example, I supposed that values is the response array you receive based on your API call.

    Also, please take into account that you might want to move that inline style (I used it to speed-up the implementation and to easily show the CSS I applied).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search