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

Sulthan
– Sulthan

2018-06-22 11:23:32 +00:00
Commented Jun 22, 2018 at 11:23 — Sulthan
– Sulthan, Commented Jun 22, 2018 at 11:23

ᴘᴀɴᴀʏɪᴏᴛɪs · Accepted Answer · 2018-06-22 12:35:05Z

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, 2018 at 12:35

answered Jun 22, 2018 at 10:58

ᴘᴀɴᴀʏɪᴏᴛɪs

7,5599 gold badges57 silver badges84 bronze badges

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

1 Comment

Sanchit Over a year ago

Thanks for the suggestion, I think having one Day component will be much better!

Collectives™ on Stack Overflow

Adding loop to Component return

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related