person component

master
Matt Huntington 5 years ago
parent 4dec7cf676
commit d03b72937e

@ -1,6 +1,7 @@
import './App.css'; import './App.css';
import React from 'react'; import React from 'react';
import axios from 'axios'; import axios from 'axios';
import Person from './components/person.js'
class App extends React.Component { class App extends React.Component {
@ -59,7 +60,7 @@ class App extends React.Component {
<ul> <ul>
{ {
this.state.contacts.map((contact)=>{ this.state.contacts.map((contact)=>{
return <li key={contact.id}>{contact.name} is {contact.age} years old</li> return <Person data={contact} />
}) })
} }
</ul> </ul>

@ -0,0 +1,14 @@
import React from 'react';
import axios from 'axios';
class Person extends React.Component {
render = ()=>{
return <li key={this.props.data.id}>
{this.props.data.name} is {this.props.data.age} years old
<button>Delete</button>
</li>
}
}
export default Person
Loading…
Cancel
Save