ReactJS: Creating a "dynamic" render of Row and Col

Question

I have an array of object with "id", "name", "value" that I pass to a component and it divided in row and col in this way:

export const RenderDetailRow = props => {
  const columns = [];
  props.content.forEach((content, idx) => {
    columns.push(
      <div className="col-sm py-3" key={`item_${idx}`}>
        <b>{content.name + ': '}</b>
        <Input type="text" name={content.name} id={content.id} readOnly value={content.value} />
      </div>
    );

    if ((idx + 1) % props.display[0].number === 0) {
      columns.push(<div className="w-100"></div>);
    }
  });

  return (
    <div className="row" style={{ margin: 30 }}>
      {columns}
    </div>
  );
};

I have two kind of problem, the first:

Each child in a list should have a unique "key" prop.

I have inserted the key but I have this error.

If the number of field is odd I have a long Input, it is possible to create a empty field o something like this?

For example Date and Created By has every one 1/2 of the space, while Last Modified has 2/2. How can I do?

Thank you

EDIT.

props.display[0].number is only a number that i pass (for example 2,3,4) to obtain the number of cols

EDIT2:

Example of Array that I pass:

const Content = [
    {
      id: 'id',
      name: 'ID',
      value: realm.id,
    },
    {
      id: 'realmId',
      name: 'ID Realm',
      value: realm.realmId,
    },
    {
      id: 'name',
      name: 'name',
      value: realm.name,
    }
]

const Display = [
    {
      number: 2,
    },
  ];

so my render is:

render(
 <RenderDetailRow content={Content} display={Display} />
)

what is if ((idx + 1) % props.display[0].number === 0) { this block about? — Shyam
– Shyam, Commented Jul 14, 2021 at 15:02
Use the id for the key, don't use array indicies (if you're using a linter it will likely tell you this). Also, why forEach over map? Also Also, max-width? — Jared Smith
– Jared Smith, Commented Jul 14, 2021 at 15:07
I think he is using forEach here as he is appending an additional div to the columns array based on position in the array. Though I thought the same thing at first. That said, this recompute on every render, consider using useMemo to wrap the logic. — canaan seaton
– canaan seaton, Commented Jul 14, 2021 at 15:10

Shyam · Accepted Answer · 2021-07-14 16:30:26Z

1

For 1, you are missing key in if block

Try point 2:

function chunkArray(array, size) {
   if(array.length <= size){
       return [array]
   }
   return [array.slice(0,size), ...chunkArray(array.slice(size), size)]
}


export const RenderDetailRow = props => {
  const columns = props.content.map((content, idx) => {
    return (
      <div
        key={`item_${idx}`}
        className="col-sm py-3"
      >
        <b>{content.name + ': '}</b>
        <Input type="text" name={content.name} id={content.id} readOnly value={content.value} />
      </div>
    );
  });

  const rows = chunkArray(columns, NUMBER_OF_ROWS);

  return rows.map((row, index) => (
    <div className="row" key={index} style={{ margin: 30 }}>
      {row[index]}
      {row[index].length - NUMBER_OF_ROWS !== 0
        ? // (render row[index].length - NUMBER_OF_ROWS) empty columns here 
        : null}
    </div>
  ))
};

edited Jul 14, 2021 at 16:30

answered Jul 14, 2021 at 15:13

Shyam

1,4648 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jack23 Over a year ago

thank you for your answer, i have tried your code but i have obtain 1 row which a number of cols equals to data from array

Shyam Over a year ago

this is just the same code I used map instead of forEach. can u share ur possible array?

Shyam Over a year ago

so if the display is 2, you want to render only 2 columns per row? also which CSS library you are using?

Collectives™ on Stack Overflow

ReactJS: Creating a "dynamic" render of Row and Col

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related