Using Inputs in React-admin list view

Question

I am trying to make an update call from the list view in react-admin. I am able to make the call but the state of the input doesn't sync with the refreshed list. What could I be doing wrong here? Please find below my list component and the input component. Also if there are better ways to go about this i.e. including an input in the list view it would be really helpful to highlight them. I am looking to input a position value in the list that changes the ordering of the list. Thanks!

 const ProductsList = props => {
    const refresh = useRefresh();
    const notify = useNotify();
    const [update] = useUpdate("position", "");

    const updatePosition = data => {
        update(
            {
                payload: { data: { ...data } }
            },
            {
                onSuccess: () => {
                    refresh();
                    notify("Position Updated", 2000);
                }
            }
        );
    };

    return <ListBase
                 exporter={false}
                 bulkActionButtons={false}
                 sort={{ field: "position", order: "ASC" }}
                 basePath='/position'
                 resource='position'
                 {...props}
    >
            <Datagrid rowClick={null}>
                <TextField source="type" sortable={false} />
                <PositionEdit source="position" sortable={false} updatePosition={updatePosition}/>
            </Datagrid>
            <Pagination />
        <Button
            color="primary"
            component={Link}
            to="/categories"
        >
            Back to Categories
        </Button>
        </ListBase>
};

const PositionEdit = props => {
    const { category_id, id, type } = props.record;
    const [showSubmit, setSubmitVisibility] = useState(false);
    const [position, setPosition] = useState("");

    const onFocusHandler = () => setSubmitVisibility(true);
    const onBlurHandler = () => {
        setSubmitVisibility(false);
        onClickHandler();
    };
    const onClickHandler = () => {
        const data = { category_id, product_id: id, position, type};
        props.updatePosition(data)
    };

    const onChangeHandler = e => setPosition(e.target.value);

  return <Input
      id={`position-${props.record.id}`}
      defaultValue={props.record.position}
      InputLabelProps={{
          shrink: true,
      }}
      onFocus={onFocusHandler}
      onBlur={onBlurHandler}
      onChange={onChangeHandler}
  />
};

Could you please clarify which input is not syncing? After you make the update call and the list is refreshed isn't the field on the altered row showing the new value? — Kia Kaha
– Kia Kaha, Commented Sep 21, 2020 at 8:05
@KiaKaha the input field of PositionEdit component doesn't get the updated values inspite of the list getting reordered as per the new positions after the update call. so essentially there are two inputs with the same position value. — akirahin
– akirahin, Commented Sep 22, 2020 at 9:35
Where is the <Input /> component imported from then and where do you set it's value to equal position? Except the defaultValue in the beginning. — Kia Kaha
– Kia Kaha, Commented Sep 22, 2020 at 10:26
Glad it helped - I have submitted it as an aswer so that you can close the question. — Kia Kaha
– Kia Kaha, Commented Sep 22, 2020 at 11:27

Kia Kaha · Accepted Answer · 2020-09-22 11:26:53Z

1

The <Input /> component have no value property set to equal the position state variable and thus is not getting updated with the changing values.

answered Sep 22, 2020 at 11:26

Kia Kaha

1,8291 gold badge23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Inputs in React-admin list view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related