0

I am trying to place any number of divs into 2 columns and if the divs/elements are odd then the last one adjusts in the center of the two columns something like this..

but currently I am getting each div in a single row.

-

Here is my code.

import "./styles.css";
import Typography from "@material-ui/core/Typography";

export default function App() {
const sampleDetails = {
sampleObservations: [
  {
    observationsId: 7,
    selected: true,
    value: "12:53",
    parentId: 2,
    name: "Time"
  },
  {
    observationsId: 4,
    selected: true,
    value: "11.4",
    parentId: 2,
    name: "Ph"
  },
  {
    observationsId: 8,
    selected: true,
    value: "12-03-21 2:06",
    parentId: 3,
    name: "Flow Date"
  },
  {
    observationsId: 9,
    selected: true,
    value: "120",
    parentId: 3,
    name: "Frequency"
  },
  {
    observationsId: 10,
    selected: true,
    value: "20",
    parentId: 3,
    name: "Sample Count"
  }
]
};

return (
<div className="App">
  <h1>Hello CodeSandbox</h1>
  <div
    style={{
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-around",
      marginBottom: "30px"
    }}
  >
    <div>
      {sampleDetails.sampleObservations.map(function (item, i) {
        return (
          <div
            key={i}
            style={{
              flexDirection: "row",
              display: "flex",
              justifyContent: "space-around",
              alignItems: "left"
            }}
          >
            <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
              {item.name}:
            </h4>
            <Typography>{item.value}</Typography>
          </div>
        );
      })}
    </div>
  </div>
  </div>
  );
}

A running sample can be found in codesandbox: https://codesandbox.io/s/stoic-cherry-trc7n?file=/src/App.js

Samra
  • 1,815
  • 4
  • 35
  • 71

2 Answers2

0

put display flex and flex direction on the parent element (tradeWaterGrabSample) and not the children. Also add a key= attribute to each child you map() to make react happy.

{sampleDetails.sampleObservations.map(function (item, i) {
  return (
    <div
      key={i}     <---- add key= attribute
      style={{

update

I tweaked your code sandbox to work. This uses grid. You had a div1 -> div2 -> item, item, item. And your styling was on div1. I moved it to div2 (the parent of the items), and deleted flex box styles. You can use display: "inline-grid" to tighten up the table. I added a margin around each item and removed the right-padding on the item title. Edit: ...and now I see what you were trying to do. 2 column grid for the table, with flexbox for the title & data within each item. I updated the code sandbox to put the flex styling back (slightly tweaked). Apologies if my initial response sent you down the wrong path.

Here's the sandbox link.

return (
  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "auto auto",
          marginBottom: "30px",
          backgroundColor: "lightgoldenrodyellow"
        }}
      >
        {sampleDetails.sampleObservations.map(function (item, i) {
          return (
            <div
              key={i}
              style={{
                backgroundColor: "lightblue",
                margin: "4px"
              }}
            >
              <h4 variant="subtitle1">{item.name}:</h4>
              <Typography>{item.value}</Typography>
            </div>
          );
        })}
      </div>
      <div>something else</div>
    </div>
  </div>
);
Dave
  • 7,552
  • 4
  • 22
  • 26
  • yep added the key and removed className tradeWaterGrabSample ..updating the code here too but it didnot work – Samra Jan 19 '22 at 02:25
  • 1
    recommend just using plain old .html file with 4 elements and get them to to render as the 2 column grid you want. Then re-write it in code. See if this helps: https://stackoverflow.com/questions/45037844/arrange-2-items-per-row-using-flexbox – Dave Jan 19 '22 at 02:51
  • looks like my issue..let me have a read – Samra Jan 19 '22 at 03:23
0

Have you try grid, try add this to your div with classname "tradeWaterGrabSample"

style={{ display: "grid", gridTemplateColumns: "auto auto" }}


<div className="App">
      <h1>Hello CodeSandbox</h1>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "auto auto",
          flexDirection: "row",
          justifyContent: "space-around",
          marginBottom: "30px"
        }}
      >
        <div style={{ display: "grid", gridTemplateColumns: "auto auto" }}>
          {sampleDetails.sampleObservations.map(function (item, i) {
            return (
              <div
                key={i}
                style={{
                  flexDirection: "row",
                  display: "flex",
                  justifyContent: "space-around",
                  alignItems: "left"
                }}
              >
                <h4 variant="subtitle1" style={{ marginRight: "5px" }}>
                  {item.name}:
                </h4>
                <Typography>{item.value}</Typography>
              </div>
            );
          })}
        </div>
      </div>
    </div>

if this is what you want(which I'm not sure I understand your goal) you can add this style to your classname instead of add inline style

Tentaro F
  • 136
  • 5