how to set the value of Input from state ( React app)

Question

hope you're doing well! I am looking to set the value of Input from the state that i receive from props! I could set all the information from "profile" state in the placeholder but when putting it in the value field it doesn't show anything here's my code and the form i use :

                        <Form
                            name="basic"
                            wrapperCol={{ span: 24 }}
                            onFinish={onUpdate}
                            onFinishFailed={onFinishFailed}>
                            <FormItem>
                                <Input prefix={<ContactsTwoTone />} placeholder={profile.name} />
                            </FormItem>

                            <FormItem name="email"
                                rules={[
                                    {
                                        type: 'email',
                                        message: 'The input is not valid E-mail!',
                                    }
                                ]}
                            >
                                <Input value={profile.email} name="name" prefix={<MailTwoTone />} placeholder={profile}  />
                            </FormItem>
                            <FormItem name="mobile" value={profile.mobile} >
                                <Input value={profile.mobile} name="mobile" prefix={<PhoneTwoTone />} placeholder={profile.mobile} />
                            </FormItem>
                            <FormItem name="addres">
                                <Input name="addres" prefix={<HomeTwoTone />} placeholder={profile.addres} />
                            </FormItem>
                            <FormItem name="description">
                                <Input.TextArea name="description" placeholder="description" rows={4} prefix={<ContainerTwoTone />} />
                            </FormItem>
                            <FormItem>
                                <Button className="width-100" type="primary" htmlType="submit" onClick={onUpdate} >Update</Button>
                            </FormItem>


                        </Form> ``` 

the useEffect function and the declaration of state : 

const [visible, setVisible] = useState(false);
const FormItem = Form.Item;
const [profile, setProfile] = useState({});


useEffect(() => {
    setProfile(props.profile); 

},[props.profile] );
const showDrawer = () => {
    setVisible(true);
}; 

Answer 1

I am looking to set the value of Input from the state that i receive from props!

If you're just looking to set the input from state, here is a simple example of that.

https://codesandbox.io/s/trusting-swanson-1q0ftq?file=/src/App.js

import { useState } from 'react';

const initialValue = 'John';

const App = () => {
  const [name, setName] = useState(initialValue);

  console.log('render');
  console.log('state: ', name);

  const handleChange = (event) => {
    const value = event.target.value;
    setName(value);
  };

  return (
    <div>
      <h2>Form</h2>
      <form>
        <input type='text' onChange={handleChange} value={name} />
      </form>
    </div>
  );
};

export default App;

Regarding the rest of your question concerning props, based your example, it looks like you may be thinking that props should inform some new state. Your example code attempts to keep some new state from your props inside your useEffect. A change in props always triggers a re-render, so you seem to really be asking about how to pass props into your form.

Below is an example with a profile using values kept in state. Those values can be sent as props to another component like your form. The profile fields will rely on state for their values. The form component will rely on props based on that state.

You can type in the profile fields to see how the form values are updated via props. Typing in the top form won't update values because these are read-only and "set from props".

You might not want a read-only form, but this is based on your example. You can pass your profile data as props to whatever component needs it. I think the idea I'm hoping to communicate here is to think about a "single source of truth" for your profile data (your state) and decide where you want that to live versus what other components need to access it.

Hopefully that helps.

https://codesandbox.io/s/damp-fire-sbxmoz?file=/src/App.js

import { useState } from 'react';

const initialProfile = {
  firstName: 'John',
  lastName: 'Doe',
};

const Form = ({ firstName, lastName }) => (
  <div>
    <h2>Form</h2>
    <form>
      <input
        label='First Name'
        type='text'
        name='firstName'
        value={firstName}
      />
      <input
        label='Last Name' 
        type='text' 
        name='lastName' 
        value={lastName} 
      />
    </form>
  </div>
);

const App = () => {
  const [profileFields, setProfileFields] = useState(initialProfile);

  const { firstName, lastName } = profileFields;

  console.log('render, profile fields: ', profileFields);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setProfileFields(() => {
      return {
        ...profileFields,
        [name]: value,
      };
    });
  };

  return (
    <div>
      <Form firstName={firstName} lastName={lastName} />
      <h2>Profile</h2>
      <form>
        <input
          label='First Name'
          type='text'
          onChange={handleChange}
          name='firstName'
          value={firstName}
        />
        <input
          label='Last Name'
          type='text'
          onChange={handleChange}
          name='lastName'
          value={lastName}
        />
      </form>
    </div>
  );
};

export default App;

Answer 2

Try to log them out and see if they are doing what they are supposed to.

const SomeInput = (props) => {
  const { name, placeholder, value } = props;
  console.log(`${name} placeholder: ${placeholder} value: ${value}`);
  return(
    <input placeholder={placeholder} value={value}/>
  );
};

const App = () => {
  const [state,setState] = React.useState('foo');
  
  console.log(`App state: ${state}`);
  
  return(
    <div>
      <SomeInput name={'input1'} placeholder={state}/>
      <SomeInput name={'input2'} value={state}/>
    </div>
  );
};

ReactDOM.render(<App/>,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>