Can you run a function in an input value in React?

Question

I want to do run a function and pass some parameters in my input value, but it's giving me this error: Invalid value for propvalueon <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

I remember reading somewhere once that you can use functions in value, but this isn't working for me. Is there another way.

value={() => this.handleMapping(row.servername,  "Data Source Server")} 

Error: Invalid value for propvalueon <input> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

Answer 1

You have provided an anonymous function here,

value={() => this.handleMapping(row.servername,  "Data Source Server")} 

Instead you need to just provide the function, which will execute when the component loads.

value={this.handleMapping(row.servername,  "Data Source Server")} 

Also make sure your handleMapping function should return something which can be treated as input value.

Simplified Demo

Note: Also make sure to provide onChange handler on input.