Two sets of data in one component - reactjs

Question

I'm passing data to a component with no issue - however, I'd now like to re-use that component with a different data set:
import React from 'react';
const people = [{
id: 1,
name: "John",
age: 32,
hobby: "jogging",
},{
id: 2,
name: "John",
age: 32,
hobby: "jogging",
}];
const cars = [{
id: 1,
manufacturer: "Ford",
model: "Focus",
year: "2014",
},{
id: 2,
manufacturer: "Honda",
model: "Civic",
year: "2012",
}];
export default function ListGroup(props) {
return (
<div>
{props.people.map((person) =>
<li key={person.id}>
<p>Name: {person.name}</p>
<p>Hobby: {person.hobby}</p>
</li>
)}
</div>
);
}
The above code works perfectly for the people fixture, but to use the same component I'm not sure what the simplest path might be. Any guidance welcome.

Answer 1

Iterate over the ids using Object.keys(component).map(function(attributes){}. I have presented it like a component you can use it like a function as well. I hope you can convert it to how you want to use it.
class ListGroup extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{this.props.value.map((component) => {
return (
<li key={component.id}>
{Object.keys(component).map(function(attributes) {
return (
<p>{attributes} : {component[attributes]}</p>
)
}, this)}
</li>
)
})}
</div>
);
}
}
class Hello extends React.Component {
constructor() {
super();
}
render() {
const people = [{
id: 1,
name: "John",
age: 32,
hobby: "jogging",
},{
id: 2,
name: "John",
age: 32,
hobby: "jogging",
}];
const cars = [{
id: 1,
manufacturer: "Ford",
model: "Focus",
year: "2014",
},{
id: 2,
manufacturer: "Honda",
model: "Civic",
year: "2012",
}];
return (
<div>
<ListGroup value={people} />
<ListGroup value={cars} />
</div>
)
}
}
ReactDOM.render(<Hello /> ,document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>