Update default value in React component

Question

I would like to set a default value on an Input from a value stored in redux.

I saw in this post that defaultValue is only for first rendering.

So I tried to use instead value then the problem is that I'm not getting able to change it's value.

import React, { useState } from "react";
import { Input } from "@fluentui/react-northstar";
const InputExample = () => {
  const [value, setValue] = useState("");
  const getText = () => {
    return setTimeout(() => setValue("blablabla"), 3000);
  };
  getText();

  return (
    <>
      <Input value={value} />
      <br />
      <br />
      <Input defaultValue={value} />
    </>
  );
};

export default InputExample;

Here's an example

The `defaultValue` attribute is generally used in uncontrolled inputs while `value` is used for controlled inputs. Neither of these have anything to do with where the value comes from, be it local component state or some redux store. Where do you connect your component to a redux store to get a value? How does *that* `Input` component handle either of these props? Based on your usage of local state for the value I assume you are intending to use a controlled input, so whatever value you get should be passed to the `value` prop of `Input`. — Drew Reese, Dec 15 '20 at 08:57
I'm getting the value from an redux store that gets values from an api call ,so in my program Input value is like `props.value`. then the user should be able to update that value. which is not working ( see example ) — infodev, Dec 15 '20 at 09:37
Your example doesn't use a redux store so I'm not sure how valid an example it is. The first input is controlled and has no `onChange` handler so it is stuck with what you set it to after the timeout, and the second is uncontrolled so it doesn't respond to changes in the `value` state. — Drew Reese, Dec 15 '20 at 09:40
I simulate the redux store by using a timeout , I think it's enough to reproduce the issue — infodev, Dec 15 '20 at 09:45
It really isn't. Redux doesn't use timeouts nor is it asynchronous. Are you trying to simulate *some* asynchronously fetched initial value that is stored in your redux state? If the value is loaded *after* the input mounts, use a controlled input, state, and `value` prop, and add an `onChange` handler so you can change it. If you wait to render the input until the initial value is ready, use the uncontrolled input and `defaultValue` prop. — Drew Reese, Dec 15 '20 at 09:57
Yes the redux is sending the value after Input is rendered either the setTimeout. What do you mean by uncontrolled input ? How can I use it in the case of the library used ( fluent ) — infodev, Dec 15 '20 at 10:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/225970/discussion-between-drew-reese-and-infodev). — Drew Reese, Dec 15 '20 at 10:11
In order to update redux store value, you need to create action event. — Amit Chauhan, Dec 15 '20 at 11:41
In above example you are not using redux. you will get redux value as props. then assign that prop value in your input as value. As @ZealousWeb called a function to change input, similarly you will need to call action function which will dispatch event to reducer. Inside reducer you can update redux value. this is how it will work if you want to directly update redux store value from your input. — Amit Chauhan, Dec 15 '20 at 11:48
And if you are not using redux you can do that simply by changing this line => setValue(e.target.value)}/> // or you can follow as @ZealousWeb answered. — Amit Chauhan, Dec 15 '20 at 11:51

score 2 · Answer 1 · answered Dec 15 '20 at 11:35

you need to add an onChange handler to handle changes made to the input

import React, { useState } from "react";
import { Input } from "@fluentui/react-northstar";

const InputExample = () => {
  const [value, setValue] = useState("");
  const getText = () => {
    return setTimeout(() => setValue("blablabla"), 3000);
  };
  getText();

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

  return (
    <>
      <Input value={value} onChange={handleChange} />
      <br />
      <br />
      <Input defaultValue={value} />
    </>
  );
};

export default InputExample;

check your example here, when I update the input et rerender the component https://codesandbox.io/s/fluent-ui-example-forked-kin7z — infodev, Dec 15 '20 at 22:23

Update default value in React component

1 Answers1