Skip to content

Instantly share code, notes, and snippets.

@mambodin mambodin/Profile

Created Jun 27, 2020
Embed
What would you like to do?
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>
// )
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.