CODEWITHSUNDEEP
reactjs
Sanchit
Sanchit

Reputation: 26

Adding loop to Component return

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?

Upvotes: 0

Views: 32

Answers (1)

ᴘᴀɴᴀʏɪᴏᴛɪs
ᴘᴀɴᴀʏɪᴏᴛɪs

Reputation: 7529

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?

Upvotes: 2

Related Questions