Reactjs displays users info serially going up irrespective of the user clicked - reactjs

Question

Reactjs displays users info serially going up irrespective of the user clicked.
I have 5 users in the array.
The code below was meant to display each Person Id and Name uniquely on their various popup box when their corresponding name
in the list button is clicked.
Here is my problem:
My issue is that if I click for instance on user 1, instead of getting content of user 1 displayed on its own popup box
it will display content of user 5.
If I pick another user randomly for example user 3 from the list, instead of getting the content of user 3 displayed on its
own popup box, it will display content of user 4 and next click of any user will display content of user 3 and so on going up to user 1.
Is this problem caused from person.id alignment or from serial alignment of users info in the array list?. can someone help me out
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import axios from 'axios';
class App extends Component {
constructor() {
super();
this.state = {
showBox: false,
data: [
{ id: "1", name: "user 1" },
{ id: "2", name: "user 2"},
{ id: "3", name: "user 3"},
{ id: "4", name: "user 4"},
{ id: "5", name: "user 5"},
],
};
this.showBox = this.showBox.bind(this);
this.closeBox = this.closeBox.bind(this);
}
showBox = (pid, name) => {
this.setState({ person_id: pid });
const dataSet = this.state.data;
alert(dataSet);
if ($.inArray(pid, dataSet) != -1)
{
dataSet.splice($.inArray(pid, this.state.data), 1);
}
dataSet.unshift(pid);
var s = 270 ; // start position
var j = 260; //next position
$.each(dataSet, function( index, value ) {
if(index < 4){
$('[rel="'+value+'"]').css("right",s);
$('[rel="'+value+'"]').show();
s = s+j;
}
else{
$('[rel="'+value+'"]').hide();
}
});
//event.preventDefault();
//event.preventDefault();
this.setState({ showBox: true }, () => {
document.addEventListener('click', this.closeBox);
});
}
closeBox(event) {
if (this.cBox.contains(event.target)) {
this.setState({ showBox: false }, () => {
document.removeEventListener('click', this.closeBox);
});
}
}
render() {
return (
<div >
<ul style={{float: "right"}}>
{this.state.data.map((person) => (
<div className="chat-sidebar" key={person.id}>
<button onClick={ () => this.showBox(person.id, person.name)}>
{person.name} </button>
{this.state.showBox
? (
<div rel={person.id} className="msg_box" style={{right: '270px',position: 'fixed', bottom:'-5px', width:'250px',background: 'white',borderRadius:'5px 5px 0px 0px', height: '200px'}}>
<div> <div style={{background: 'red',height: '150px'}}>
<div ref={(element) => {this.cBox = element;}} style={{color: 'blue'}}>Close</div>
Each Users info will appear here below.<br />
(person Id: {person.id})<br />
(person Name: {person.name})<br />
</div>
</div>
</div>
): (
null
)}
</div>
))}
</ul>
</div>
);
}
}
Screenshot updates
Updated Code as Requested by Sir Win
import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import axios from 'axios';
class User extends React.Component {
open = () => this.props.open(this.props.data.id, this.props.data.name);
render() {
return (
<React.Fragment>
<div key={this.props.data.id}>
<button onClick={() => this.open(this.props.data.id,this.props.data.name)}>{this.props.data.name}</button>
</div>
</React.Fragment>
);
}
}
class OpenedUser extends React.Component {
close = () => this.props.close(this.props.data.id);
render() {
return (
<div style={{ display: 'inline-block' }}>
<div onClick={this.toggle} className="msg_head">
(<b style={{ color: 'orange' }}>
Minimize
</b>)
<button onClick={this.close}>close</button>
<div>user {this.props.data.id}</div>
<div>name {this.props.data.name}</div>
<div className="msg_wrap"><div className="msg_body">Message will appear here</div></div>
</div>
</div>
)
}
}
class ChatReact extends React.Component {
constructor() {
super();
this.state = {
shownToggle: true,
activeIds: [],
data: [
{ id: 1, name: "user 1" },
{ id: 2, name: "user 2" },
{ id: 3, name: "user 3" },
{ id: 4, name: "user 4" },
{ id: 5, name: "user 5" }
]
};
}
open = (id,name) => {
alert(name);
alert(id);
this.setState((prevState) => ({
activeIds: prevState.activeIds.find((user) => user === id)
? prevState.activeIds
: [...prevState.activeIds, id]
}));
}
close = id => {
this.setState((prevState) => ({
activeIds: prevState.activeIds.filter((user) => user !== id),
}));
};
renderUser = (id) => {
const user = this.state.data.find((user) => user.id === id);
if (!user) {
return null;
}
return (
<OpenedUser data={user} close={this.close}/>
)
}
renderActiveUser = () => {
return (
<div style={{ position: "fixed", bottom: 0, right: 0 }}>
{this.state.activeIds.map((id) => this.renderUser(id)) }
</div>
);
};
render() {
var hidden = {
display: this.state.shownToggle ? "block" : "none"
}
return (
<div>
{this.state.data.map(person => (
<User key={person.id} data={person} open={this.open} />
))}
{this.state.activeIds.length !== 0 && this.renderActiveUser()}
</div>
);
}
}

Answer 1

Welcome to StackOverflow. To get around this problem, I would use .find instead of $.inArray so that we can filter down the data into one result so that we can use it to display the information in the info box.
Avoid using document.addEventListener and document.removeEventListener and rely purely on state. If you're trying to achieve something not listed in the question, then please explain.
Also, try and avoid using jQuery with React.
Here's an example:
class User extends React.Component {
open = () => this.props.open(this.props.data.id);
render() {
return (
<React.Fragment>
<div key={this.props.data.id}>
<button onClick={this.open}>{this.props.data.name}</button>
</div>
</React.Fragment>
);
}
}
class OpenedUser extends React.Component {
close = () => this.props.close(this.props.data.id);
render() {
return (
<div style={{ display: 'inline-block' }}>
<button onClick={this.close}>close</button>
<div>user {this.props.data.id}</div>
<div>name {this.props.data.name}</div>
</div>
)
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
activeIds: [],
data: [
{ id: 1, name: "user 1" },
{ id: 2, name: "user 2" },
{ id: 3, name: "user 3" },
{ id: 4, name: "user 4" },
{ id: 5, name: "user 5" }
]
};
}
open = id => {
this.setState((prevState) => ({
activeIds: prevState.activeIds.find((user) => user === id)
? prevState.activeIds
: [...prevState.activeIds, id]
}));
}
close = id => {
this.setState((prevState) => ({
activeIds: prevState.activeIds.filter((user) => user !== id),
}));
};
renderUser = (id) => {
const user = this.state.data.find((user) => user.id === id);
if (!user) {
return null;
}
return (
<OpenedUser data={user} close={this.close}/>
)
}
renderActiveUser = () => {
return (
<div style={{ position: "fixed", bottom: 0, right: 0 }}>
{this.state.activeIds.map((id) => this.renderUser(id)) }
</div>
);
};
render() {
return (
<div>
{this.state.data.map(person => (
<User key={person.id} data={person} open={this.open} />
))}
{this.state.activeIds.length !== 0 && this.renderActiveUser()}
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>