how to display react variable in render function using ternary operator

react conditional render multiple elements
conditional rendering react
react: render conditionally from props
react: use a ternary expression for conditional rendering
conditional rendering react router
conditional rendering react hooks
react conditional rendering best practices
conditional rendering react native

why doesn't 'hidden' get added to the input tag?

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

    return (
      <div>
        <input type="checkbox" id="boldCheckbox" {this.state ? 'hidden':'';}  />
       <button id="decreaseButton" hidden='true'>-</button>
        <span id="fontSizeSpan" hidden="true">
          {this.props.size}
        </span>
        <button id="increaseButton" hidden="true">
          +
        </button>
        <span id="textSpan">{this.props.text}</span>
      </div>
    );
  }
}

and here's my html:

<html>
  <head>
    <title>Font Chooser</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="FontChooser.js" type="text/jsx"></script>
  </head>
  <body>
    <div id="container"></div>

    <script type="text/jsx">

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

You can use inline styles to hide

<input type="checkbox" id="boldCheckbox" style={this.state.hidden ? {display: 'none'} : {} />

Or you can use classes to hide

<input type="checkbox" id="boldCheckbox" className={this.state.hidden ? classes.hidden : ''} />

If you just don't want to render it

{!this.state.hidden &&
<input type="checkbox" id="boldCheckbox" />
}

how to display react variable in render function using ternary operator, You can use inline styles to hide <input type="checkbox" id="boldCheckbox" style ={this.state.hidden ? {display: 'none'} : {} />. Or you can use� Then, you can render only some of them, depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them. Consider these two components:

<input type={this.state.hidden ? 'hidden' : 'checkbox'} id="boldCheckbox"  />

5 Ways to Implement Conditional Rendering in React, The pros and cons of different conditional rendering implementations in The structure will be B -> C. Now, React will see a structure different Ternary operator is a shorter form of the 'if-else' condition. let cond = truefunction App() { We can use an element variable to store the element to be returned� In our case, expr1 is the variable stars, which has a value of 0. Because zero is falsey, 0 is returned and rendered. See, that wasn’t too bad. I would write this simply. If expr1 is falsey, returns expr1, else returns expr2. So, when using a logical AND with non-boolean values, we must make the falsey value return something that React won

<input type="checkbox" id="boldCheckbox" {...this.state} />

or

<input type="checkbox" id="boldCheckbox" hidden={this.state.hidden} />

Conditional Rendering in React using Ternaries and Logical AND, Conditional Rendering in React using Ternaries and Logical AND Here's the same component written using a conditional ternary operator. Because we are using the single statement form of the arrow function, the return statement is If isPro (a boolean) is true , we are to display a trophy emoji. We are� Short-circuit AND operator. The ternary operator has a special case where it can be simplified. When you want to render either something or nothing, you can only use the && operator. Unlike the & operator, && doesn’t evaluate the right-hand expression if evaluating only the left-hand expression can decide the final result.

7 Ways to Implement Conditional Rendering in React Applications , With React, we can build Single Page Applications that are dynamic and highly interactive. Ternary Operators; 5. we want to be able to display a Login button if the user isn't logged in Extracting the conditional rendering into a function Element variables are simply variables that hold JSX elements. The ternary operation makes the conditional rendering in React not only more concise, but gives you an easy way to inline the conditional rendering in your return. This way, only a one part of your JSX is conditionally rendered, while other parts can stay intact without any condition.

8 conditional rendering methods in React, There's more than one way to use conditional expressions in React. If/else; Prevent rendering with null; Element variables; Ternary operator; Short-circuit work, a component with a view/edit functionality will be implemented: Now, for the render method, check the mode state property to either render� Not exactly like that, but there are workarounds. There's a section in React's docs about conditional rendering that you should take a look. Here's an example of what you could do using inline if-else.

Three ways to conditionally render components with React and JSX , Approach 1: A variable and an if() statement Approach 2: Return null from component's render() method A ternary operator gets more difficult to read in that situation, and I don't think it's particularly obvious how to format this type of complex ps if are going to use redux you will see a lot of theese… I have a reactjs rendermethod and I am trying to set a variable through a function, it looks like this(you guessed it , does not work): render() { let myVariable='' //this function

Comments
  • Do you want hidden to be a value of the type attribute or the class attribute?
  • i just want to add the word hidden to the input tag as it doesn't take any arguments like true or false
  • To completely hide it, or just disable it?
  • just to hide the checkbox
  • Good answer. He can also put the ternary in the type attribute, so type is hidden or checkbox
  • doesn't work it adds class='hidden' but i need to add just hidden
  • both works perfectly well codepen.io/dimoff66/pen/zYxOjdb?editors=1010
  • @DCR Who "they"? What is "updated post"? What is relation it has to your question and my absolutely precise answer? Strange...
  • @DCR You can come by the link to codepen i posted above and see that it works, but if personally for you it doesnt work - bad luck, thank you for question
  • your example doesn't reflect the question. move reatDOM.render to the html file and you'll see your answer doesn't work, not even for you.