Hide or display element in react components class

Question

A simple question, but I have not found a solution: ** Why in console log is print undefined?**

class Kabala extends Component {

state = {
name: '',
receiptId: 0,
price1: 0,
price2: 0,
name1: '',
receiptId1: 0,
price11: 0,
price21: 0,
session: false
}
     render() {
     const { session } = this.state.session;
     return (
         <button className="btn btn-info mt-4" onClick={() => this.setState({ session: !session }</button>
         { session ? <div>
           <input type="text" placeholder="Name1" name="name1" onChange={this.handleChange}/>
         </div> :console.log(session)}

Answer 1

You should get the session state like this:

class Kabala extends Component {
    state = {
    name: '',
    receiptId: 0,
    price1: 0,
    price2: 0,
    name1: '',
    receiptId1: 0,
    price11: 0,
    price21: 0,
    session: false
    }
         render() {
         const { session } = this.state;
         return (
             <button className="btn btn-info mt-4" onClick={() => this.setState({ session: !session }</button>
             { session ? <div>
               <input type="text" placeholder="Name1" name="name1" onChange={this.handleChange}/>
             </div> :console.log(session)}