React: How to toggle a single instance of a react element

React: How to toggle a single instance of a react element
0

#1

Hi guys, I’m working on a commenting system using react. I have a component with a click handler that changes the state and renders a reply form. Basically each comment component has a reply button and on click a form drops below.

Now the issue is, clicking on one reply button reveals all the other reply forms, so lets say I’ve got five (5) comment boxes, clicking on any one reveals all five (5) forms!!.

I want the reply form of the clicked element only to show. If it helps, below is my code.

import React, { Component } from 'react'

export default class CommentReply extends Component {
     constructor () {
        super()
        this.state = {
          isHidden: true
        }
    }

    toggleHidden () {
        this.setState({
          isHidden: !this.state.isHidden
        })
    }
	
    render() {
        const load = this.state.isHidden;
        return(
				<div className="actions">
                    <a className="reply" onClick={this.toggleHidden.bind(this)}>Reply</a>
                    <a className="save">Save</a>

                    {load ? <form className="ui reply form">
                        <div className="field">
                            <input type="hidden" name="StatusId" className="cp_coment"/>
                            <textarea className="cp_rep" name="content"></textarea>
                        </div>
                     </form>: ""}
                </div>
        );
    }
}

Please where am I getting it wrong.


#2

From what you described it looks like you have multiple forms for each comment component, correct me if I am wrong, but are the forms different in structure/looks/function or are they all the same ? if they are the same , the way I would solve the problem is to have just one form, then I would hold the unique contents of the form in the comment components state, that way whenever a new comment component is loaded so would the contents of the form… if you post your repo it would be easier to so how your all your code fits togethr


#3

Hi Dereje1, thanks for taking your time. The code already contains everything you need. Have got a component CommentReply that hides and shows a form on toggle.

 {load ? <form className="ui reply form">
             <div className="field">
                 <input type="hidden" name="StatusId" className="cp_coment"/>
                 <textarea className="cp_rep" name="content"></textarea>
             </div>
         </form>: ""}

Capture

On clicking reply, the form shows. Now imagine several components like the image above rendered. on clicking reply for one comment, only the form associated with that particular comment should be rendered and not all of them.

Something like Facebook’s comment box.


#4

Like I said, without seeing how you are duplicating the comment components , your callbacks to the individual components , and how the parent state distributes the information to the forms, I can only tell you what I told you before, which is the way I’d handle that problem. In essence you have to have a way to associate the form with the particular comment component, you store this association in the parent state and then when you toggle act upon the stored info.

All you are showing now is an input box and your toggler, if I duplicate your component I get this:

which doesn’t tell me much…


#6

It’s funny, your codepen link actually works. clicking on a reply displays one form at a time and not all.
I think it has to do with the arrow function ()=> …binding this to the context.

Thank you so much for your time. hopefully others can also use your code as a reference point.


#7

glad it worked, but to be honest i did not do anything but just duplicate your component in the most generic ‘react’ way of doing so, I did not change a single line in your component’s code.
Perhaps I had a misunderstanding in your original question… but anyway, all good