How can i use for-loop in styled-components?

Question

I am a student who is studying React very hard.

Now, I am making a timetable with a toy project.

I use a grid of css to create a timetable.

But it is becoming a very passive program.

I want to get the 'schedules' variable in the backend and automatically generate nth-of-type ()

&:nth-of-type (i) {
    grid-area: start / day / end / day + 1;
}

I want to ... I do not know how.

Help me . Thank you.

this is my code . but its not working. because function createCSS({ total, start, end, day, schedules }) are undefined...

how can i fix this code ?

import React from 'react';
import styled, { css } from 'styled-components';
const Wrapper = styled.div``;
const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 40px;
  width: 50%;
  margin: 0 auto;
  > div {
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
`;

function createCSS({ total, start, end, day, schedules }) {
  let styles = '';
  for (let i = 1; i <= length; i++) {
    styles += `
         &:nth-of-type(${i}){
            grid-area: ${start} / ${day} / ${end}  / ${day + 1}  ;
            grid-area: 1 / 1/ 1/ 2;
         }
       `;
  }

  return css`
    ${styles}
  `;
}

const Subject = styled(Grid)`
  > div {
    /* &:nth-of-type(1) {
      background: pink;
      grid-area: 1 / 1 / 23 / 2;
      display: grid;
    } */
    ${createCSS(
      `${props => props.total}`,
      `${props => props.start}`,
      `${props => props.end}`,
      `${props => props.day}`,
      `${props => props.schedules}`,
    )}
  }
`;

const ApplyMainPresenter = ({ schedules }) => {
  return (
    <Wrapper>
      <Grid>
        <div>
          <span>Tuesday</span>
        </div>
        <div>
          <span>Wednesday</span>
        </div>
        <div>
          <span>Thursday</span>
        </div>
        <div>
          <span>Friday</span>
        </div>
        <div>
          <span>Saturday</span>
        </div>
        <div>
          <span>Sunday</span>
        </div>
      </Grid>
      {schedules.map(schedule => (
        <Subject
          key={schedule.id}
          start={schedule.start}
          end={schedule.end}
          day={schedule.day}
          total={schedules.length}
          schedules={schedules}
        >
          <div>
            <span>{schedule.title}</span>
            <span>{schedule.start}</span>
            <span>{schedule.end}</span>
            <span>{schedule.day}</span>
          </div>
        </Subject>
      ))}
    </Wrapper>
  );
};

export default ApplyMainPresenter;





import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div``;
const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 40px;
  width: 50%;
  margin: 0 auto;
  > div {
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
`;

const Subject = styled(Grid)`
  > div {
    &:nth-of-type(1) {
      background: pink;
      grid-area: 1 / 1 / 23 / 2;
      display: grid;
      > div {
      }
    }
    &:nth-of-type(2) {
      background: yellow;
      grid-area: 17 / 2 / 22 / 3;
    }
    &:nth-of-type(3) {
      background: green;
      grid-area: 17 / 3 / 22 / 4;
    }
    &:nth-of-type(4) {
      background: skyblue;
      grid-area: 17 / 4 / 23 / 5;
    }
  }
`;

const ApplyMainPresenter = ({ schedules }) => {
  return (
    <Wrapper>
      <Grid>
        <div />
        <div>
          <span>Tuesday</span>
        </div>
        <div>
          <span>Wednesday</span>
        </div>
        <div>
          <span>Thursday</span>
        </div>
        <div>
          <span>Friday</span>
        </div>
        <div>
          <span>Saturday</span>
        </div>
        <div>
          <span>Sunday</span>
        </div>
      </Grid>
      <Subject>
        <div>
          <div>
            <span>10:00 ~ 10:30</span>
          </div>{' '}
          <div>
            <span>10:30 ~ 11:00</span>
          </div>{' '}
          <div>
            <span>11:00 ~ 11:30</span>
          </div>{' '}
          <div>
            <span>11:30 ~ 12:00</span>
          </div>{' '}
          <div>
            <span>12:00 ~ 12:30</span>
          </div>{' '}
          <div>
            <span>12:30 ~ 13:00</span>
          </div>{' '}
          <div>
            <span>13:00 ~ 13:30</span>
          </div>{' '}
          <div>
            <span>13:30 ~ 14:00</span>
          </div>{' '}
          <div>
            <span>14:00 ~ 14:30</span>
          </div>{' '}
          <div>
            <span>14:30 ~ 15:00</span>
          </div>{' '}
          <div>
            <span>15:00 ~ 15:30</span>
          </div>{' '}
          <div>
            <span>15:30 ~ 16:00</span>
          </div>{' '}
          <div>
            <span>16:00 ~ 16:30</span>
          </div>{' '}
          <div>
            <span>16:30 ~ 17:00</span>
          </div>{' '}
          <div>
            <span>17:00 ~ 17:30</span>
          </div>{' '}
          <div>
            <span>17:30 ~ 18:00</span>
          </div>{' '}
          <div>
            <span>18:00 ~ 18:30</span>
          </div>{' '}
          <div>
            <span>18:30 ~ 19:00</span>
          </div>{' '}
          <div>
            <span>19:00 ~ 19:30</span>
          </div>{' '}
          <div>
            <span>19:30 ~ 20:00</span>
          </div>{' '}
          <div>
            <span>20:00 ~ 20:30</span>
          </div>{' '}
          <div>
            <span>20:30 ~ 21:00</span>
          </div>
        </div>
        {schedules.map(schedule => (
          <div key={schedule.id}>
            <span>{schedule.title}</span>
          </div>
        ))}
      </Subject>
    </Wrapper>
  );
};

export default ApplyMainPresenter;

Answer 1

I think your problem is in the spot where you are using your function and the props are not extracted correctly. Try to rewrite this bit so that use first get the props as an argument of an inline function and then use them in your createCSS function. Since you are using the ES6 object destructuring in your function, you don't need to list the arguments, just pass the props object:

${createCSS(
  `${props => props.total}`,
  `${props => props.start}`,
  `${props => props.end}`,
  `${props => props.day}`,
  `${props => props.schedules}`,
)}

to this:

${props => createCSS(props)}

Or you could use the shorthand syntax which is the exact same as the above

${createCSS}

Hope this help!