Adding loop to Component return

Question

Okay so I have a react-app which has a component which looks like this

import { TimeLine, Monday, Tuesday, Wednesday, Thursday, Friday } from './WorkSchedComponents';



class WorkSched extends Component {
            render() {
                return(
                    <div>
                        <div className='header'>
                        <h1>Schedule</h1>
                        </div>
                        <Container>
                            <Row>
                                <div className='timeline'><TimeLine /></div>
                                <div className='data-class'><Monday /></div>
                                <div className='data-class'><Tuesday /></div>
                                <div className='data-class'><Wednesday /></div>
                                <div className='data-class'><Thursday /></div>
                                <div className='data-class'><Friday /></div>
                            </Row>
                        </Container>
                    </div>
                );
        }
}

Here I am adding all days components one by one. Is there any way I can use a loop to add these components, maybe use map?

Possible duplicate of [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Sulthan, Jun 22 '18 at 11:23

ᴘᴀɴᴀʏɪᴏᴛɪs · Answer 1 · 2018-06-22T12:35:05.813

2

Something like:

[Monday, Tuesday, Wednesday, Thursday, Friday]
     .map(component => <div className='data-class'><component/></div>);

eg.

<Container>
    <Row>
        {
        [Monday, Tuesday, Wednesday, Thursday, Friday]
            .map(component => <div className='data-class'><component/></div>);
        }
    </Row>
</Container>

You should add a key to the div as well, to help React identify when things changed.

As a side note, your approach of having a separate component for each day seems suboptimal. What about having one Day component and passing in the day as a prop?

edited Jun 22 '18 at 12:35

answered Jun 22 '18 at 10:58

ᴘᴀɴᴀʏɪᴏᴛɪs

7,169
9
50
81

Thanks for the suggestion, I think having one Day component will be much better! – Sanchit Jun 22 '18 at 11:59

Adding loop to Component return

1 Answers1