14

I have a component:

class CommentBox extends Component {
    render() {
        return (
            <div>
                <p>Some comment</p>
                <a>Post a reply to this comment</a>
            </div>
            <ReplyForm />
        )
    }
}

I need this ReplyForm to be hidden on initial load. How to trigger it's state by clicking on a tag?

norbitrial
  • 14,716
  • 7
  • 32
  • 59
kuatro
  • 481
  • 1
  • 5
  • 17

3 Answers3

21

You should add some flag to the state of CommentBox. And if value of this flag is false when don't show ReaplyFrom and vice versa. Heres the code and working example http://codepen.io/anon/pen/KzrzQZ

class ReplyForm extends React.Component {
  constructor() {
    super()
  }
  render(){
    return(
      <div>I'm ReplyForm</div>
    )
  }
}

class CommentBox extends React.Component {
  constructor() {
    super();
    this.state = {
      showReply: false
    }
  }
  onClick(e){
    e.preventDefault();
    this.setState({showReply: !this.state.showReply})
  }
  render() {
    return (
      <div>
        <p>Some comment</p>
         <a onClick={this.onClick.bind(this)} href='#'>Post a reply to this comment</a>
        {this.state.showReply && < ReplyForm / >}
      </div>
    )
  }
}
t1m0n
  • 3,413
  • 1
  • 17
  • 21
  • 1
    You are mutating state inside a component. Is that something ok in Redux? According to it's defination state is maintained and mutated by a global store. – Aftab Naveed Nov 16 '16 at 03:07
  • @AftabNaveed I just tried to show that you don't need Redux or any other extra lib to perform such operation. But I guess you right, if you are using Redux then `showReply` should be placed in store. – t1m0n Nov 21 '16 at 13:30
  • Using this model I am getting a message like "Warning: setState(...): can only update a mounted or mounting component " if I use setState inside one of the components that I am trying to show up or hide. Is there anyway to avoid this problem? – Jose Cabrera Zuniga Aug 04 '17 at 02:23
  • 1
    Isn't using `setState()` defeating the purpose of using Redux/not answering the question? OP asked for a Redux solution so I figured they wanted to manage state accordingly – Clay Banks Mar 05 '18 at 16:44
4

How about this?

class CommentBox extends Component {
  constructor() {
    super();
    this.state = {
      showForm: false
    }
  }

  render() {
    const showHide = {
      'display': this.state.showStatus ? 'block' : 'none'
    };

    const showReplyForm = () => {
      this.setState({showForm: true});
    };

    return (
      <div>
        <div>
            <p>Some comment</p>
            <a onClick={showReplyForm}>Post a reply to this comment</a>
        </div>
        <div style={showStatus}>
          <ReplyForm />
        </div>
      </div>
    )
  }
}
anoop
  • 3,229
  • 23
  • 35
0

You can try rc-if-else module

npm install --save rc-if-else

import React from 'react';
import { If } from 'rc-if-else';

class CommentBox extends Component {
    constructor() {
        super();
        this.state = {
            showForm: false
        }
    }

    render() {
        const showReplyForm = () => {
            this.setState({showForm: true});
        };

        return (
            <div>
                <div>
                    <p>Some comment</p>
                    <a onClick={showReplyForm}>Post a reply to this comment</a>
                </div>
                <If condition={this.state.showStatus}>
                    <ReplyForm />
                </If>
            </div>
        )
    }
}
qinyuanbin
  • 11
  • 5