0

my problem is this: I have an array of elements that I want to display with data.array.map (array => {..}. But I would like to do it according to a scheme that has different object, like that:

  1. Element: 3 thirds
  2. Element: 1 third
  3. Element: 2 thirds 4-5. Element: 1 third
  4. Element: 2 thirds 7, 8. Element: 1 third
  5. Element: 2 thirds

And it would be nice if this scheme could be continued, i.e. if you could load more objects and then start this scheme all over again. Is there a way to do this in NextJS? Or a library or something similar?

example picture for the schema: Schema

Improve this question
8
  • 1
    Bootstrap or Tailwind CSS can help in achieving this layout. E.g. with Bootstrap you can use a sequence of elements with these classes: container row col-12 row col-4 col-8 row col-4 col-4 col-4 row col-8 col-4 row col-4 col-8. Commented Jan 12, 2022 at 0:07
  • Thank you, but how is it possible to style each item individually? Commented Jan 12, 2022 at 1:31
  • 1
    You can use the for loop with the step of 10 to iterate over your items and create this 5-row group in each iteration. Commented Jan 12, 2022 at 2:24
  • Sorry i dont know how i can make this in react, can you maybe give me a link or a example code snippet? Commented Jan 12, 2022 at 2:36
  • 1
    Yes, you can look at this sandbox Commented Jan 12, 2022 at 12:20
Related questions
0
Getting data from JSON with React mapping
5
Can't access values when mapping over in next.js / react
3
JSX mapping arrays stored inside a dynamic object (Next.js)
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.