Profile

import React from 'react';
import ReactDom from 'react-dom';




let root = document.getElementById('root')

let jsx = (
  <div><h1>Welcome to my site</h1> <p>Hello World!</p></div>
)

let dataValues = [{
  name:"Mike",
  age:22,
  skills: ['lockpicking','investigate'],
  image:"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2F736x%2Fb2%2Fef%2F4b%2Fb2ef4b94e0540a1fcd251f7758e1c351.jpg&f=1&nofb=1"
},{
  name:"Bob",
  age:23,
  skills:['sorcery','healing'],
    image:"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F3d%2Fc2%2Fa1%2F3dc2a1125d87cf038aa6fc5e61e777d3.jpg&f=1&nofb=1"
}]



 let Profile = ({name, age, image, skills}) =>{
   return (
     <div>
       <h1>Name : {name}</h1>
       <img src={image} alt={name} width="200" />
       <p>Age : {age}</p>

       <ul>
         { skills.map((elem)=>{
           return <li>{elem}</li>
         })}
       </ul>
     </div>

   )}


let App = () =>{
  return(
    <div>
    <h1> Members of the Guild</h1>
       {
        dataValues.map((elem)=>{
        return <Profile 
        key={elem.name+elem.age} 
        name={elem.name} 
        age={elem.age} 
        image={elem.image} 
        skills={elem.skills}/>
      })
      } 
     
    </div>
  )
}


ReactDom.render(<App />,root)


// let jsx2 = (name) => {
//   return (
//     <div>
//       <h1>Hello {name}</h1>
//       <p>Where are you from? </p>
//     </div>
//   )
// }

// let Profile2 = (props) => {
//   return (
//     <div>
//       <h1>Name : {props.name}</h1>
//       <p>Age : {props.age}</p>
//     </div>

//   )
// }