I'm a little new to react and was a little lost with what to do here. I'm loading data from firebase and rendering the props of that object using a .map function to list all the 'ments' on a page, which works fine. I also want to call a ponent that would allow the user to reply an individual ment (i.e. one specific element in the map), but as expected by this code, when the reply button is clicked it displays the called ponent under every element of the map, which isn't desirable. Is there anyway I could call the ponent for just one element of the map in this case?

changeIsReply() {
  this.setState(
    {isReply: !this.state.isReply,}
  );
}    

  render() {

  return (
    <div>
    <ul className="list-group">
    {Object.values(this.propsmentInfo).map((data) =>
      data.map((secondData, i) =>
        <div className="mentHolder" key={i}>
            <p>{secondData.text}</p>
            <p>{secondData.category}</p>
            <p>{secondDataanization}</p>
            <button> UpButton </button> <br />
            <button> DownButton </button>
            <button onClick = {this.changeIsReply} > Reply </button>
            {this.state.isReply ? <SetComment id={secondData.key} /> : null}
        </div>
      )
    )}
    </ul>
    </div>
  )
}

I'm a little new to react and was a little lost with what to do here. I'm loading data from firebase and rendering the props of that object using a .map function to list all the 'ments' on a page, which works fine. I also want to call a ponent that would allow the user to reply an individual ment (i.e. one specific element in the map), but as expected by this code, when the reply button is clicked it displays the called ponent under every element of the map, which isn't desirable. Is there anyway I could call the ponent for just one element of the map in this case?

changeIsReply() {
  this.setState(
    {isReply: !this.state.isReply,}
  );
}    

  render() {

  return (
    <div>
    <ul className="list-group">
    {Object.values(this.props.mentInfo).map((data) =>
      data.map((secondData, i) =>
        <div className="mentHolder" key={i}>
            <p>{secondData.text}</p>
            <p>{secondData.category}</p>
            <p>{secondDataanization}</p>
            <button> UpButton </button> <br />
            <button> DownButton </button>
            <button onClick = {this.changeIsReply} > Reply </button>
            {this.state.isReply ? <SetComment id={secondData.key} /> : null}
        </div>
      )
    )}
    </ul>
    </div>
  )
}

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Jun 8, 2017 at 5:37 Tom Jones asked Jun 8, 2017 at 5:19 Tom JonesTom Jones 13511 gold badge11 silver badge44 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

That's because you are using a single state for all the ments.

<button onClick = {() => this.changeIsReply(secondData.key)} > Reply </button>

{this.state.isReply && this.state.clickedComment == {secondData.key} ? <SetComment id={secondData.key} /> : null}

and change your changeIsReply() to:

changeIsReply(clickedId) {
    this.setState({
        isReply: !this.state.isReply, 
        clickedComment: clickedId
    });
}

See if this works. Don't forget to add the new state to your constructor.

You need to keep isReply to be an array of array and based on index of the ment clicked, update only the proper value, something like

state= {
   isReply: [[]]
}
changeIsReply(i, j) {
  var isReply = [...this.state.isReply]
  if(isReply[i] === undefined) {
    isReply.push([true]) = 
  } else {
    if(isReply[i][j] === undefined) {
      isReply[i].push(true)
    } else {
       isReply[i][j] = !isReply[i][j]
    }
  }
  this.setState(
    {isReply}
  );
}    

  render() {

  return (
    <div>
    <ul className="list-group">
    {Object.values(this.props.mentInfo).map((data, i) =>
      data.map((secondData, j) =>
        <div className="mentHolder" key={j}>
            <p>{secondData.text}</p>
            <p>{secondData.category}</p>
            <p>{secondDataanization}</p>
            <button> UpButton </button> <br />
            <button> DownButton </button>
            <button onClick = {() => this.changeIsReply(i, j)} > Reply </button>
            {this.state.isReply[i][j] ? <SetComment id={secondData.key} /> : null}
        </div>
      )
    )}
    </ul>
    </div>
  )
}

You can keep track of which ment should have SetComment ponent instead.

constructor(props) {
  super(props);
  this.state = {
    // init mentReplyIds as empty array
    mentReplyIds : [],
    // ... rest of your state
  }
}

changeIsReply(mentId) {
  const newCommentReplyIds = [...this.state.mentReplyIds. mentId];
  this.setState(
    {mentReplyIds: newCommentReplyIds}
  );
}    

  render() {
  // in here I am using the data.text as the unique id of each ment, you can use other serializable value.
  return (
    <div>
    <ul className="list-group">
    {Object.values(this.props.mentInfo).map((data) =>
      data.map((secondData, i) =>
        <div className="mentHolder" key={i}>
            <p>{secondData.text}</p>
            <p>{secondData.category}</p>
            <p>{secondDataanization}</p>
            <button> UpButton </button> <br />
            <button> DownButton </button>
            <button onClick = {() => this.changeIsReply(secondData.text)} > Reply </button>
            {this.state.mentReplyIds.includes(secondData.text) ? <SetComment id={secondData.key} /> : null}
        </div>
      )
    )}
    </ul>
    </div>
  )
}

With this approach, you can have multiple SetComment ponents, in different ments of which the user has clicked the reply ment button.

I suggest breaking this into two ponents. The CommentList and the Comment ponent.

ment-list.js

import Comment from './ment';

class CommentList extends Component{
    render(){
    return(
        <div>
        <ul className="list-group">
                {Object.values(this.props.mentInfo).map((data) =>
                data.map((secondData, i) =>
                    <Comment text={secondData.text} category={secondData.category} organization={secondDataanization} key={secondData.key} />
      )
        </ul>
      </div>
    )
  }
}

ment.js

class Comment extends Component {
    constructor(props){
    super(props);
    this.state = {
        isReply: false
    }
  }
  changeIsReply = () => {
    this.setState(
      {isReply: !this.state.isReply,}
    );
  }   
    render(){
    const {text, category, organization, key} = this.props;
    return(
      <div className="mentHolder" key={i}>
        <p>{text}</p>
        <p>{category}</p>
        <p>{organization}</p>
        <button> UpButton </button> <br />
        <button> DownButton </button>
        <button onClick = {this.changeIsReply} > Reply </button>
        {this.state.isReply ? <SetComment id={key} /> : null}
      </div>
    )
  }
}

export default Comment;

This way each ment has control over its own state and whether or not to show the SetComment ponent.

Try to make more ponents instead of putting all markup in a single render method. This also helps organize your code so that you are mapping each set of values to a ponent which I feel makes it a little easier to wrap your head around.