在React组件内循环

Question

I have the following react component

const Layout = () => {
return (
    <ThemeProvider>
        <Flex wrap>
            <Box width={[1, 1 / 3]}>
                <Text bold>Targeting</Text>

                <Iconlist text="Something"/>

            </Box>
            <Box width={[1, 1 / 3]}>
                <Text bold>Tactics</Text>
            </Box>
            <Box width={[1, 1 / 3]}>
                <Text bold>Results</Text>
            </Box>

        </Flex>
    </ThemeProvider>

)
};
export default Layout;

I want to implement something like this:

...
<Iconlist text="Something"/>
<Iconlist text="Something else"/>
<Iconlist text="Something else else"/>
<Iconlist text="Something ...."/>
...

How can I write a loop that can do the above ie display multiple Iconlist component. I know how to use props to change the "something" value but I am unable to run a loop.

I tried this:

<Box width={[1, 1 / 3]}>
                <Text bold>Targeting</Text>

                {
                    for(var i=0;i<=5;i++){
                    <Iconlist text="Something"/>
                }
                }

            </Box>

But I am guessing that's not the correct way to inject javascript in between. I am a beginner to React and trying to learn how to do this. What's the best practice?

Answer 1

You can use Array.prototype.map()

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Example

<Box width={[1, 1 / 3]}>
  <Text bold>Targeting</Text>
  { Array(5).map((i) => (<Iconlist key={i} text={`Something ${i}`} />)) } 
</Box>

Answer 2

<Box width={[1, 1 / 3]}>
  <Text bold>Targeting</Text>
    {
      ['something',
       'something else',
       'something else else',
       'something ...',
      ].map((text, index) => <Iconlist key={index} text={text}/>)
    }
</Box>

Answer 3

You need first to declare the text values in array like this

const texts = ['something', 'something else' ..]

And in the render method add the following

{ texts.map((text) => <Iconlist text={text}/>) }

Answer 4

You can store your items in an array in the state :

...

constructor(props) {
  super(props)
  this.state = {
    items: [
      'something',
      'something else',
      'something else else',
      'something ...'
    ]
  }
}

...

...and then map over the array in your render function:

...

{
  this.state.items.map(item => <Iconlist text={ item } />)
}

...

This will then re-render when you update the state.

You could also pass in the array as a prop and then render like this:

...

{
  this.props.items.map(item => <Iconlist text={ item } />)
}

...