CODEWITHSUNDEEP
javascriptreactjstypescript
Tasha Herber
Tasha Herber

Reputation: 319

Dynamically add attributes in React render input

I have an input tag in render like this:

<input id="time" type="time">

and I need dynamimically add value attribute

How can I do this in React? Thanks in advance

Upvotes: 0

Views: 3507

Answers (5)

Attersson
Attersson

Reputation: 4866

I guess you are rendering the tag within a render() function within a JSX expression (otherwise you would have added it through normal Javascript or JQuery).

Therefore the JSX expression will have something like:

<input id="time" type="time" value={yourValue}>

making sure that yourValue is in scope within the context of execution of your render() in your ReactComponent class or in the props. Alternatively it could be in the state.

Upvotes: 0

wkrueger
wkrueger

Reputation: 1353

You shouldn't dynamically add or remove a "value" field. When you create a React input, it must be either "controlled" or "uncontrolled" through its whole lifespan. Changing it will make React yell a warning on the console.

React understads an input is meant to be uncontrolled if value is not present or undefined, so you need to at least set it to "" in order to achieve a controlled empty input.

  • "Controlled" means react controls its value. Ex: For the value to be changed, you'd need to notify react of the change (through onChange + setState) and then make it change its value;

  • "Uncontrolled" means react can't control the input's value, and you'd read and change the value through regular DOM ways (ex: input.value).

That being said, in order to dynamically change the presence of any element properties (props), you can use the "object spread" operator.

function render() {
  const custom = { value: 2, color: randomColor() }
  return <Element {...custom}/>
}

Upvotes: 0

Cory Baker
Cory Baker

Reputation: 167

You would need to set the state of React. So...

this.setState({
  myValue: newValue
})

Then, inside render:

<input id="time" type="time" value={this.state.myValue}>

This assumes you have your state setup with a constructor. Which is a whole other can of worms.

Upvotes: 0

Bob van &#39;t Padje
Bob van &#39;t Padje

Reputation: 734

You should add an onchange attribute on the input which changes the state of your component. This will look something like this:

<input type="text" value={this.state.value} onChange={this.handleChange} />

The handleChange method should then look something like this:

handleChange = (event) => {
    this.setState({value: event.target.value});
  }

For more information check out the following article: https://reactjs.org/docs/forms.html

Upvotes: 0

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22875

Yes, you can do. e.g. props is an object which contains props or properties that you want to add based on some condition then you can something like

 const props = { id: 'time', type: 'time' };
 if (condition1) {
    props.value = 'some value';
 }
 if(condition2) {
    props.abc = 'some other value';
 }   
 <input {...props} >

Upvotes: 3

Related Questions