React - array of colors will change color <p>

Question

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:
enter image description here

Thanks in advance.


Show source
| javascript   | reactjs   2017-01-06 11:01 1 Answers

Answers to React - array of colors will change color &lt;p&gt; ( 1 )

  1. 2017-01-06 11:01

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

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

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

Leave a reply to - React - array of colors will change color <p>

◀ Go back