Search code examples
reactjsreduxreact-redux

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

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.

Solution

  • 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.