I'm a newbie in React and I have an app that should render different <p> with different colors from an array.

as for my latest code

const data1 = [
      {name: 'one'},
      {name: 'two'},
      {name: 'three'},
      {name: 'four'}
];

const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

export default React.createClass({
  render() {
      return (
          <div>
          {data1.map(function(a) {
              return (
                  <p>{a.name}</p>
                )
            })}
          </div>
        )
  }
})

I'm a newbie in React and I have an app that should render different <p> with different colors from an array.

as for my latest code

const data1 = [
      {name: 'one'},
      {name: 'two'},
      {name: 'three'},
      {name: 'four'}
];

const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

export default React.createClass({
  render() {
      return (
          <div>
          {data1.map(function(a) {
              return (
                  <p>{a.name}</p>
                )
            })}
          </div>
        )
  }
})

and the output should be like this:

Thanks in advance.

• javascript
• reactjs

1 Answer 1

You can use the iterator of the map to set the style of the p element accordingly.

In ES6:

const data1 = [
  { name: 'one' },
  { name: 'two' },
  { name: 'three' },
  { name: 'four' }
];

const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

class Example extends React.Component {
  render() {
    return (
      <div>
        {data1.map((a, i) => <p style={{ color: colors[i] }} key={i}>{a.name}</p>)}
      </div>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>

In ES5 (with createClass, which is not remended):

const data1 = [
  { name: 'one' },
  { name: 'two' },
  { name: 'three' },
  { name: 'four' }
];

const colors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

const Example = React.createClass({
  render() {
    return (
      <div>
        {data1.map(function(a, i) {
           return (
             <p style={{ color: colors[i] }} key={i}>{a.name}</p>
           );
        })}
      </div>
    );
  }
});

ReactDOM.render(<Example />, document.getElementById('View'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='View'></div>