Input value is showing undefined (reading 'value') while using rsuite library

Question

It is basically rsuite@4.10.2 version

const [user, setuser] = useState('')
<InputGroup>
      <Input type='text' value={user} onChange={e=>{setuser(e.target.value)}} id="user"/>
          <InputGroup.Button>
                 <Icon icon="user" />
          </InputGroup.Button>
  </InputGroup>

also i have provided with the error image just look this out enter image description here

Answer 1

rsuite library return the value directly in the onChange function. So, instead:

onChange={e=>{setuser(e.target.value)}}

You should write

onChange={value=>{setuser(value)}}

This is a class that I have written with rsuite / bootstrap and basic input. You can see the difference and copy/paste the part that you want.

import React, { useState } from 'react';

import { InputGroup, Input } from 'rsuite';

import InputGroupBoostrap from 'react-bootstrap/InputGroup';
import FormControlBoostrap from 'react-bootstrap/FormControl';

const Question2 = () => {

  const [user, setUser] = useState('example');
  return (
    <>
      {/* rsuite */}
      <InputGroupBoostrap>
        <Input type='text' value={user} onChange={value=>{ setUser(value)}} id="user"/>
        <InputGroup.Button>
          Button
        </InputGroup.Button>

      {/* Bootstrap */}
      </InputGroupBoostrap>
        <InputGroupBoostrap>
        <InputGroupBoostrap.Text>User 1</InputGroupBoostrap.Text>
        <FormControlBoostrap value={user} onChange={(e) => { setUser(e.target.value); }} placeholder="user" />
      </InputGroupBoostrap>

      {/* input */}
      <div>
        <span>User 2</span>
        <input value={user} onChange={(e) => { setUser(e.target.value); }}/>
      </div>
    </>
  );
}

export default Question2;

I hope I've helped