CODEWITHSUNDEEP
reactjsreact-admin
akirahin
akirahin

Reputation: 25

Using Inputs in React-admin list view

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}
  />
};

Upvotes: 0

Views: 881

Answers (1)

Kia Kaha
Kia Kaha

Reputation: 1781

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

Upvotes: 1

Related Questions