CODEWITHSUNDEEP
reactjsinputcomponentsfetchdefault-value
rumon
rumon

Reputation: 606

React component's defaultValue does not work

I'm trying to use a fetched value from DB as a default value (shown until the component is clicked) of an input field.

However, using "defaultValue" attribute, the fetched value it is not displayed.

App.tsx file (value is fetched successfully):

  const [Income, setIncome] = useState<string>('0');

    useEffect(() => {

    const incomeResp = async () => {
      await axios.get('http://localhost:4000/app/income')
      .then(
        result => setIncome(result.data && result.data.length > 0 ? result.data[0].income : 0))
    }
    incomeResp();
  }, []);


  return (
      <div className="App">
        <div>
          <IncomeExpensesContainer 
            income={Income}
            setIncome={setIncome} 
            totalExpenses={TotalExpensesAmount} 
            currencySymbol={Currency}
          />
      </div>

Component's file:

interface Props {
    income: string;
    setIncome: (value: string) => void; 
    totalExpenses: number;
    currencySymbol: string;
}

const IncomeExpensesContainer: React.FC<Props> = ({
        income,
        setIncome, 
        totalExpenses, 
        currencySymbol,
    }: Props) => {


   const [insertedValue, setInsertedValue] = useState<string>(income);

return (
    <Grid container spacing={1} className="income-expenses-container">
        <InputItem 
            onChange={setInsertedValue}
            onBlur={setIncome}
            title="Income" 
            type="number" 
            placeholder="Your income" 
            defaultValue={income}
        />
    </Grid>
);

What am I missing here?

Upvotes: 0

Views: 1332

Answers (2)

juvet manga
juvet manga

Reputation: 1

To anyone who encounters this problem in the future, the solution that worked for me was to use the in-built type casting methods of javascript when passing number type values. This for example

const Component = (props) => {
       return (
            <InputItem 
              onChange={setInsertedValue}
              onBlur={setIncome}
              title="Income" 
              type="number" 
              placeholder="Your income" 
              defaultValue={props.income}
        />
}

when called should receive the defaultValue as

<InputItem 
        onChange={setInsertedValue}
        onBlur={setIncome}
        title="Income" 
        type="number" 
        placeholder="Your income" 
        defaultValue={income.toFixed(0)} // toString and toPrecision work as well 
    />

I think it is something taking place under the hood of the React Native TextInput component, though I don't have any resource justifying this.

Hope it helps.

Upvotes: 0

Delice
Delice

Reputation: 856

Edited after additional information provied

Use the passed prop in your component:

const Component = (props) => {
       return (
            <InputItem 
              onChange={setInsertedValue}
              onBlur={setIncome}
              title="Income" 
              type="number" 
              placeholder="Your income" 
              defaultValue={props.income}
        />
}

Upvotes: 1

Related Questions