Cannot change value in input fields

Question

This is my code:

<Input
      onChange={(e) => someChange(e)}
      valid={check.length !== 0}
      invalid={check.length === 0}
      type="text"
      name="name"
      id="name"
      placeholder={something}
      value={props.someProp ? props.user.name : ''}
/>

So what happens here is when I enter into props.someProp my value gets retrieved. The problem is that I cannot edit that field. Please note that user object gets populated when this screen appears.

How can I make some kind of sanity check so I still get the value populated, but I can edit it afterwards?

Thanks.

You cannot dynamically change props - you'll have to store those within state. Also can you provide the code for someChange — steadweb
– steadweb, Commented Jul 24, 2019 at 16:57
what does someChange do? maybe if you inverse the logic like value={ props.user.name? '' : props.someProp} ? — Vencovsky
– Vencovsky, Commented Jul 24, 2019 at 16:58
You also don't necessarily need valid AND invalid since one boolean will be the inverse of the other one — JohnSnow
– JohnSnow, Commented Jul 24, 2019 at 17:07
@MisterMister "and stores it" where? A parent component? The state of this component? There is not enough information in your question to get the correct answer, please include the entire parent component where <Input /> is being used, as well as any functions referenced. — Cal Irvine
– Cal Irvine, Commented Jul 24, 2019 at 17:39

steadweb · Accepted Answer · 2019-07-24 17:13:31Z

1

If you're using stateless components AND React 16.8+, use hooks. This will allow your stateless component to contain state. React calls these function components.

You might have previously known these as “stateless components”. We’re now introducing the ability to use React state from these, so we prefer the name “function components”.

Example

const Foo = props => {
  const [name, someChange] = useState(props.someProp ? props.user.name : '');

  return (
    <Input
      onChange={(e) => someChange(e.target.value)}
      value={name}
      ...
    />
  );
}

Documentation on hooks can be found here.

answered Jul 24, 2019 at 17:13

steadweb

16.8k3 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alok Mali · Accepted Answer · 2019-07-24 17:36:04Z

0

Set the initial state on component mount. After that the inputed value will be set on onChange.

constructor(props){
  super(props);
  this.state({name:''});
}

componentDidMount(){
  this.setState({name: props.someProp ? props.user.name : ''});
}

someChange(e){
 let name = e.target.name;
 this.setState({[name]: e.target.value});
}

<Input
  onChange={(e) => someChange(e)}
  valid={check.length !== 0}
  invalid={check.length === 0}
  type="text"
  name="name"
  id="name"
  placeholder={something}
  value={this.state.name}
/>

answered Jul 24, 2019 at 17:36

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

Collectives™ on Stack Overflow

Cannot change value in input fields

2 Answers 2

Example

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Example

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related