Rendering component after onClick

Question

I want to render my data after button click. I use the condition rendering in my component and create a boolean variable in state object. After button clicked variable is changed and (as I expected) my data was renderered. But nothing happens. I know that this is a basic mistake.

class SortingMyArray extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            addcomments: addcomments,
            isClicked : false
        }

     //   this.sortBy = this.sortBy.bind(this)
    }

    sortBy() {
            let sortedComments = [...this.state.addcomments].sort((a,b) => new Date(b.date) - new Date(a.date));
            this.setState({
            addcomments: sortedComments,
            isClicked : true
           })
            console.log(this.state.isClicked)
    }

  render(){
            return(
                  <div>
                        <div>
                           <button
                           onClick={() => this.sortBy() }>AdditionalCommentaries
                           </button>
                        </div>
                  </div>
                )
            if (this.state.isClicked){
                return(
                    <div>
                            <div>
                             <AddComments addcomments = {this.state.addcomments} />
                            </div>
                    </div>
                )
            }

            }
}

export default SortingMyArray;

Answer 1

You should not have more than one return inside render method. Instead try this:

Note: There is no if-else statement in JSX but we use the one bellow

render(){
    return(

        <div>
            <div>
                <button
                    onClick={() => this.sortBy() }>AdditionalCommentaries
                </button>
            </div>
        </div>
        {
            this.state.isClicked
            &&
            <div>
                <div>
                    <AddComments addcomments = {this.state.addcomments} />
                </div>
            </div>
        }
    )
}

Answer 2

This part of your code is unreachable by the program since it is placed after return . You should not have two returns.

if (this.state.isClicked){
   return (
      <div>
         <div>
            <AddComments 
               addcomments={this.state.addcomments} 
            />
         </div>
     </div>
   )
}

Also, your conditional statement is not valid JSX. Your render method should look something like this

render() {
    return (
        <div>
           <div>
              <button onClick={() => this.sortBy()}>
                 AdditionalCommentaries
              </button>
           </div>
           {this.state.isClicked && (
              <div>
                 <div>
                    <AddComments 
                       addcomment={this.state.addcomments} 
                    />
                 </div>
              </div>
           )}
        </div>
    )
}

Answer 3

You need to restructure your render method since part of code is unreachable, also you don't need to use IF sentence, you can use logical operator && to ask if isClicked is true to return AddComments component.

You need to install eslinter in your code editor, this can you help to detect this type errors or others

RENDER METHOD:

render() {

//You can destructuring object, in this case your state is the object
const { isClicked, addcomments } = this.state;
return (
  <div>
    <div>
      <button onClick={() => this.sortBy()}>AdditionalCommentaries</button>
    </div>

    {isClicked && (
      <div>
        <AddComments addcomments={addcomments} />
      </div>
    )}
  </div>
);
}