0
235
ViewsReact - array of colors will change color <p>
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.
·
Santiago Trujillo
1 answers
Answer question0
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>
·
Santiago Trujillo
Report
Answer question