How do I conditionally add attributes to React components

0 votes

Is there a way to only add attributes to a React component if a certain condition is met?

I'm supposed to add required and readOnly attributes to form elements based on an Ajax call after render, but I can't see how to solve this since readOnly="false" is not the same as omitting the attribute completely.

The example below should explain what I want, but it won't work (Parse Error: Unexpected identifier).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});
Jul 22, 2020 in Angular by kartik
• 37,490 points
3,559 views

1 answer to this question.

0 votes

Hello @kartik,

For certain attributes, React is intelligent enough to omit the attribute if the value you pass to it is not truthy. For example:

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

will result in:

<input type="text" required>

Hope it helps!!

ThanK You!

answered Jul 22, 2020 by Niroj
• 82,680 points

Related Questions In Angular

0 votes
1 answer

How to update nested state properties in React

Hello @kartik, In order to setState for a nested object ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,680 points
5,342 views
0 votes
1 answer

How to add “active” class to Html.ActionLink in ASP.NET MVC?

Hello @kartik, The way you handle your UI ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,680 points
1,185 views
0 votes
1 answer

How do you bind an Enum to a DropDownList control in ASP.NET?

Hello @kartik, I probably wouldn't bind the data as it's ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,680 points
736 views
0 votes
1 answer

How to do a Jquery Callback after form submit?

Hello @kartik, Just do like this - $("#myform").bind('ajax:complete', function() ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,680 points
1,913 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 4, 2020 in Java-Script by Niroj
• 82,680 points
205 views
0 votes
1 answer

Error: EACCES: permission denied, access '/usr/local/lib/node_modules' react

Hello @kartik, Change your file permissions like this First ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,680 points
3,970 views
0 votes
1 answer

How to specify a port to run a create-react-app based project?

Hello @kartik, You could use cross-env to set the port, ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,680 points
2,357 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,680 points
6,821 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,680 points
8,862 views
0 votes
1 answer

How to loop inside React JSX?

Hello @kartik, You're just calling JavaScript functions. You ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,680 points
327 views