Componentler arası veri taşıma
APP.JS
import React, { Component } from ‘react’
import Users from “./components/Users.js”
class App extends Component {
state = {
users : [
{
id : 1,
name: “Musa Bal”,
salary: “10000”,
department:”IT”
},
{
id : 1,
name: “Ali Ak”,
salary: “80000”,
department:”Pazarlama”
},
{
id : 1,
name: “Veli Kara”,
salary: “90000”,
department:”İK”
}
]
}
render() {
return (
<div>
<Users users = {this.state.users}/>
</div>
)
}
}
export default App;
USERS.JS
import React, { Component } from ‘react’
import User from “./User.js”
class Users extends Component {
render() {
const {users} = this.props
console.log(users)
const {id, name, salary, department} = this.props
return (
<div>
{
users.map(user =>{
return(
<User
key = {user.id}
name = {user.name}
salary={user.salary}
department = {user.department}
/>
)
})
}
</div>
)
}
}
export default Users;
USER.JS
import React, { Component } from ‘react’
class User extends Component {
state = {
isVisible : false
}
onClickEvent=(e)=>{
this.setState({
isVisible : !this.state.isVisible
})
}
render() {
//Destructing
const {id, name, salary, department} = this.props
const {isVisible} = this.state
return (
<div className = “col-md-8 mb-4”>
<div className=”card”>
<div className=”card-header d-flex justify-content-between”>
<h4 className=”d-inline” onClick ={this.onClickEvent}>{name}</h4>
<i className=”far fa-trash-alt” style = {{cursor:”pointer”}}></i>
</div>
{
isVisible ? <div className=”card-body”>
<p className=”card-text”>Tutar : {salary}</p>
<p className=”card-text”>Departman : {department}</p>
</div>
: null
}
</div>
</div>
)
}
}
export default User;
