The onClick on the unodered list is not working?

Question

The on onclick function which should call the function which is HTML inside Java-script (JSX). Does not seems to work??

Does onClick only works on a button or does it also work on the lists too?

class Top extends React.Component{
constructor(){
    super();
    this.searchjsx = this.searchjsx.bind(this);
}

searchjsx = () =>{
    return(
        <div id='searchdiv'>
            <form id='searchform'>
                <input type="text" id="input" name="search"></input>
            </form>
        </div>
    );
}
render(){
    return(
        <div>
        <div id="navbar">
            <ul id="nav">
                <li><a className="a" href='https://www.google.com/'>Home</a></li>
                <li><a  className="b" href='https://www.google.com/'>Profile</a></li>
                <li><a className="c" href='https://www.google.com/'>Pricing</a></li>
                <li onClick={this.searchjsx} id='sch'>Search..</li>
            </ul>
        </div>
        <div>

        </div>
        </div>
    );
}

}

Answer 1

The below worked for me:

import React from "react";

export default class Top extends React.Component {
  state = {
    showForm: false
  };

  searchjsx = () => {
    console.log("Toggled showForm");
    this.setState({ showForm: !this.state.showForm });
  };

  render() {
    return (
      <div>
        <div id="navbar">
          <ul id="nav">
            <li>
              <a className="a" href="https://www.google.com/">
                Home
              </a>
            </li>
            <li>
              <a className="b" href="https://www.google.com/">
                Profile
              </a>
            </li>
            <li>
              <a className="c" href="https://www.google.com/">
                Pricing
              </a>
            </li>
            <li onClick={this.searchjsx} id="sch">
              Search..
            </li>
            {this.state.showForm ? (
              <div id="searchdiv">
                <form id="searchform">
                  <input type="text" id="input" name="search"></input>
                </form>
              </div>
            ) : (
              ""
            )}
          </ul>
        </div>
        <div></div>
      </div>
    );
  }
}

Notes:

1. onclick should work on any element

2. You were trying to insert the form inside the onClick attribute. Instead, you should change the state of the component when li is clicked and based on the state show or hide the form

3. You don't seem to need a constructor in this example