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.
Share Improve this question asked Jan 6, 2017 at 10:06 kcNekokcNeko 6091 gold badge9 silver badges23 bronze badges1 Answer
Reset to default 6You 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>