What is the correct way in reactjs? - reactjs

Question

I am new to react. In my project, I have a Home Component.
class Home extends Component {
logOut(){
console.log('log out in side home js');
this.props.LogOutAction();
localStorage.setItem('loginFlag', null);
}
render(){
return(
<div>
<Header />
<br/>
<div className="col-md-12 ">
<div className="col-md-3 home-border">
a
</div>
<div className="col-md-6 home-border">
<User/>
</div>
<div className="col-md-3 home-border">
c
</div>
</div>
</div>
)
}
}
And my User component is
class User extends React.Component {
viewProfile(id){
}
render() {
var userdetails = [ {"id":"1", "name":"Abraham", "country": "USA", "age":"29", "image":""},
{"id":"2", "name":"Gregory", "country": "Canada", "age":"23", "image":""},
{"id":"3", "name":"Mathews", "country": "Newzeland", "age":"24", "image":""},
{"id":"4", "name":"Williamson", "country": "China", "age":"27", "image":""},
{"id":"5", "name":"Edwerd", "country": "Germany", "age":"22", "image":""}
];
var myStyle = {
border:"1px solid black",
height:"170px",
}
return(
<div>
<div>
{userdetails.map((data, i) => <div className="col-md-12 div-bottom" style={myStyle} key={i}>
<div className="col-md-12">
<div className="col-md-12">
<img className="img-thumbnail img-margin" width="150" height="236" src = {'profile.jpg'} />
</div>
<div className="col-md-12 div-bottom"><label>{data.name}</label></div>
<div className="col-md-12 div-bottom">
<div className="col-md-6"><label>age:</label> {data.age}</div>
<div className="col-md-3"><label>Country:</label> {data.country}</div>
</div>
<div className="col-md-4 .div-bottom"><button className="btn btn-primary" onClick={ () => { this.viewProfile(data.id) } }>view Profile</button></div>
</div>
</div>)
}
</div>
</div>
)
}
}
I want to show the more user details in place of 'c' in the Home Component on the button click in the User Component.What is the correct method and how it can done?. Thanks in advance..

Answer 1

There are two approaches. First is to use React only. You create a parent component, containing the state of the app. In the parent component you can create a function that changes the state. You can pass the function to your user component and the state to the home component.
Simplified:
const Home = ({ user }) => <div>{user.name}</div>;
const User = ({ changeUser }) => {
const users = [
{ name: 'User1' },
{ name: 'User2' },
];
const renderUsers = () => users.map(
user => <li onClick={() => changeUser(user)}>{user.name}</li>
);
return <ul>{renderUsers()}</ul>;
};
class Parent extends React.Component {
constructor(props) {
super(props);
this.changeUser = this.changeUser.bind(this);
this.state = { user: null };
}
changeUser(user) {
this.setState({ user });
}
render() {
return (
<div>
<Home user={this.state.user} />
<User changeUser={this.changeUser} />
</div>
);
}
}
However, when your app grows it becomes very complicated to manage the state via a parent component. You can use something like a "Flux" architecture for this. "Redux" is the most common way in the React world for building up Flux like architecture.

Answer 2

What does 'a' stand for?
First of all , who does query you user's data?
I think Home must handle server calls, then you need to store that data in the Home component's state, then you need to pass them as props to the User and UserDetails component.
In my opinion Flux or Redux are needed only if your application become really big, and you don't want to have to many server calls during the session.
As a tips, if your User and UserDetails components only need to visualize data you can try to make them 'stateless' (refer to stateless components), in than way you don't need to handle willReceiveProps.
You can Handle 'viewProfile' method in the Home component, calling it from the User component with a callback (passed as a prop)

Answer 3

you can send an event as props and call it from other component.
Say you have a class
Class Home {
handleChange(evt) {
this.setState({ username: evt.target.value });
}
render {
return (
<div>
<Users name={this.state.username} onChange={this.handleChange}/>
<div> {this.state.username} </div>
</div>
);
}
}
Child Component
Class Users {
handleChange() {
//logic
}
render {
return (
<div>
<input type="text" onChange={this.props.onChange}/>
{this.props.name}
</div>
);
}
}
Here in Component Users when you change the input it will call the
method of class Home and update state of Home .
Now getting the updated state as props in component Users will give
you the changed text that you just entered