2

I´m trying to populate the values of material-ui datepicker fields when rendering the edit form component, I can see in the console that the date object is being created correctly, but its not passing to the state, dont know what i´m doing wrong.

Here is the component


function DatePickerField(props) {

    const { field , studentValues, control} = props;
    const classes = useStyle();
    const [date, setDate] = useState(null);
   
    
    const handleChange = (date) => {
        setDate(date)
               
    }

    

    // Check if the input name of the field we get from knack match the input name of the form and if yes display the value
    useEffect(() => {
        if (studentValues) {
            const dataStudentArranged = DataStudent(studentValues);
            dataStudentArranged.forEach((card) => {
                card.cardValues.forEach((cardValue) => {
                    
                    if (cardValue.formName === field.formName) {
                        const dateObject = fromUnixTime(cardValue.value/1000)
                        setDate(dateObject)
                        console.log('date object =>',dateObject)
                    }
                })
            })
        }
    }, []);

    return (
        <TableRow>
            <TableCell>
                <Controller defaultValue={date} name={field.formName} control = {control}
                as = {
                <DatePicker 
                    className={classes.datePicker}
                    inputVariant = "outlined"
                    label={field.label}
                    value={date} 
                    onChange={handleChange}
                    autoOk
                    variant="inline"
                    format= "dd, MMMM yyyy"
                    size="small"
                    />
                } 
                />
            </TableCell>
        </TableRow>
    )
}

export default DatePickerField

Thanks!

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Perestrelo
  • 183
  • 1
  • 3
  • 14
  • 1
    You are (potentially) overwriting state updates in the loop(s). Can you provide a more [Minimal, Complete, and Reproducible](https://stackoverflow.com/help/minimal-reproducible-example) code example so we can better see what is occurring? Can you also provide the steps to reproduce the issue? – Drew Reese Oct 24 '20 at 20:28
  • Hi @DrewReese thanks for the time to take a look to my question, I updated the post with the complete code of the component, except the imports and styles. – Perestrelo Oct 24 '20 at 20:46
  • TBH I don't see anything that would cause a state update *not* to work, I fully trust that the react hook does what it is supposed to do. I'm curious, is the issue that the effect runs only once when mounted (i.e. empty dependency array), and `studentValues` updates *after* mounting? What happens when you do a bit more logging with the lifecycle? Do you have the react-dev-tools installed so you can do a bit more digging? – Drew Reese Oct 24 '20 at 21:19
  • You are missing a dependency in your `useEffect` hook. My guess is that `studentValues` is loaded asynchronously and may be null or undefined on first render. It should be added in the dependency array so that when its value changes, the effect is re-executed. – known-as-bmf Oct 24 '20 at 21:49
  • I found the solution, I posted the answer bellow and changed the question. I hope it helps someone else – Perestrelo Oct 24 '20 at 21:57

1 Answers1

7

The problem was with the react-hook-form, it was always passing the default values even after using useEfect, this question helped me to solve the issue: https://stackoverflow.com/a/62243132/9813493

Basicly when using react-hook-form with the control prop we should use the setValue function https://react-hook-form.com/api#setValue

Perestrelo
  • 183
  • 1
  • 3
  • 14