CODEWITHSUNDEEP
reactjs
aaayumi
aaayumi

Reputation: 1274

Make input with' hidden=true' value show by changing state in React.JS

I'm making a React.js application. I cannot find the way to change the hidden input to show so I decided to post a question here.

The functionality I want to implement :

If you click a text, a checkbox should be appeared. This checkbox is input and there is hidden=trueinside the tag.

As long as I know, we can use ternary operator to change the styling inside JSX tag. However ternary operator does not work for hidden element.

Here is codepen demo.

The code 

class FontChooser extends React.Component {
constructor(props) {
super(props);
this.state = {
    hidden: true
}
this.handleClick = this.handleClick.bind(this);
}

handleClick(){
    this.setState({
        hidden: !this.state.hidden
    })
}

render() {
return(
       <div>
       <input type="checkbox" 
           id="boldCheckbox"
           hidden={{ !this.state.hidden ?  'false' : 'true' }}  
           />
        <span id="textSpan" onClick={this.handleClick}  >
       {this.props.text}              
       </span>
       </div>
      );
   }
 }

 React.render(
 <div>
 <FontChooser min='4' max='40'  text='Fun with React!' bold='false'/>
 </div>,
 document.getElementById('container'));

Thank you for your kind help!

Upvotes: 0

Views: 16004

Answers (2)

cfraser
cfraser

Reputation: 961

Instead of 

hidden={{ !this.state.hidden ?  'false' : 'true' }}

You should have

type={!this.state.hidden ?  'hidden' : 'checkbox'}

Upvotes: 3

NickHTTPS
NickHTTPS

Reputation: 799

You have a pair of extra {}

If you do this it should work:

hidden={ !this.state.hidden ? true : false }

Upvotes: 1

Related Questions