0

I have this textfield:

const [configAssessmentReason, setConfigAssessmentReason] = React.useState("");

<InputTextfield
disabled={inputDisabled || inputDisabledNoAccess}
label={"Reasoning for Assessment"}
value={configAssessmentReason}
textArea={true}
onChange={(val) => setConfigAssessmentReason(val)}
/>

and this Hook:

const { initiative, isError, isLoading } = useFetchUniqueTableData(
strategic_initiative_key,
authToken,
selectedArchive,
{ name: "strategic_initiative" }
);

I set the value of the textfield after I get my data here:

React.useEffect(() => {
    const fetchData = async () => {
        ......
        const si = strategic_initiative[0];
        setConfigAssessmentReason(si.reasoning_assessment); <- Here
        ......
    setTimeout(() => {
      hideLoader();
    }, 1000);
  }
};
fetchData();
}, [initiative, isError, isLoading, selectedArchive]);

My Problem

When I load the initial data: my textfield has the value "".

When I load data from the archive: my textfield has the value "ABCDEFGHIJK"

When I reselect my original data: my textfield should be "" again but has visual fragments of "ABCDEFGHIJK". The fragments will disappear, if I click on the textfield on click out.

Why does my textfield does not render correctly, when my value is ""?

JohnDole
  • 525
  • 5
  • 16
  • Can you please add precision about the libraries used? For example, where does InputTextfield come from? – ostrebler Jun 21 '23 at 13:08
  • have you included entire code? because you declared `const [configComments, setConfigComments]` but value used in textbox is `value={configAssessmentReason} onChange={(val) => setConfigAssessmentReason(val)` – Sandeep Jun 21 '23 at 13:13
  • edited my question @Sandeep - copied something wrong – JohnDole Jun 21 '23 at 13:14
  • from an internal company library, @ostrebler – JohnDole Jun 21 '23 at 13:14
  • 1
    Proceed by elimination. Log the string state value, if there is nothing wrong with it, then the problem is internal to your input component. – ostrebler Jun 21 '23 at 13:18
  • is your setConfigAssessmentReason call is made after async operation gets complete? – Sandeep Jun 21 '23 at 13:27
  • your `fetchData();` call should be something like `fetchData().then((reasoning_assessment) => setConfigAssessmentReason(reasoning_assessment));` – Sandeep Jun 21 '23 at 13:33
  • Update: If I dont pass data via "setConfigAssessmentReason" and pass data initially via "useState" - everything works as intented. why?! – JohnDole Jun 21 '23 at 14:19

1 Answers1

0

It sounds like your ‘InputTextField’ isn’t re-rendering when your ‘configAssessmentReason’ value is updated.

You say: “When I reselect my original data”

How are your doing this? Something simple like this should cause a re-render.

<button onClick={setConfigAssessmentReason(() => “”)}></button>

Also note that when I update the state, I’m using a callback () => “”. This is because:

setState works in an asynchronous way. That means after calling setState the this.state variable is not immediately changed. so if you want to perform an action immediately after setting state on a state variable and then return a result, a callback will be useful (Taken from When to use React setState callback)

If that’s not helpful, try showing us what you mean by “reselect my original data”

Shakur Smith
  • 1
  • 1
  • Hi, in my useEffect (where I pass data to "setConfigAssessmentReason(si.reasoning_assessment)", I have "selectedArchive". When I change the selectedArchive value (its a dropdown) the data fetch gets triggered again – JohnDole Jun 21 '23 at 13:46