Set value in custom editComponent in material-table

Question

currently I'm working on material-table and I have build custom component to render in editComponent, but I'm unable to set value in the particular column.

suppose I have column:

import AutoCompleteSample from './Autocomplete';

Const columns = [{"title":"Apple","field":"apple"}, {"title:"Banana","field":"banana",editComponent:props=>(<AutoCompleteSample value={props.value} 

onChange={props.onChange} />)}]

But I'm unable to set the value inside banana field.

Autocomplete.js:

function AutocompleteSample() {

const [item, setItem] = useState({
    code: '',
    name: '',
    unit: '',
    rate: ''
});

const [cursor, setCursor] = useState(0);

const [searchItems, setSearchItems] = useState([]);

const autocomplete = useCallback((evt) => {
    const text = evt.target.value;
    fetch(
        `https://invoiceitems.herokuapp.com/items?name_like=${text}&_limit=6`
    )
        .then((res) => res.json())
        .then((data) => {
            setSearchItems(data);
        });
}, []);

const handleKeyup = useCallback((evt) => {
    if (evt.keyCode === 27) {
        setSearchItems([]);
        return false;
    }
    return true;
}, []);

const handleKeydown = useCallback(
    (evt) => {
        // arrow up/down button should select next/previous list element
        if (evt.keyCode === 38 && cursor > 0) {
            setCursor((prevCursor) => prevCursor - 1);
        } else if (evt.keyCode === 40 && cursor < searchItems.length - 1) {
            setCursor((prevCursor) => prevCursor + 1);
        }

        if (evt.keyCode === 13) {
            let currentItem = searchItems[cursor];
            if (currentItem !== undefined) {
                const {code, name, unit, rate} = currentItem;
                setItem({code, name, unit, rate});
                setSearchItems([]);
            }
        }

        if (evt.keyCode === 8) {
            setItem({code: '', name: '', unit: '', rate: ''});
        }
    },
    [cursor, searchItems]
);

const selectItem = useCallback(
    (id) => {
        let selectedItem = searchItems.find((item) => item.code === id);
        const {code, name, unit, rate} = selectedItem;
        setItem({code, name, unit, rate});
        setSearchItems([]);
    },
    [searchItems]
);

const handleListKeydown = useCallback((evt) => {
    console.log(evt.keyCode);
}, []);

return (
    <div className={'container mt-3'}>
        <h1 className={'h2 text-center'}>{'Autocomplete Example'}</h1>
        <div className={'form-group'}>
            <label htmlFor={'autocomplete'}>{'Item Name'}</label>
            <input
                type={'text'}
                id={'autocomplete'}
                onChange={autocomplete}
                onKeyUp={handleKeyup}
                onKeyDown={handleKeydown}
                value={item.name}
                className={'custom-input form-control'}
            />
            {searchItems.length > 0 && (
                <ul className={'list-group'}>
                    {searchItems.map((item, idx) => (
                        <li
                            className={
                                cursor === idx
                                    ? 'active list-group-item'
                                    : 'list-group-item'
                            }
                            key={idx}
                            onClick={() => selectItem(item.code)}
                            onKeyDown={handleListKeydown}>
                            {item.name}
                        </li>
                    ))}
                </ul>
            )}
        </div>
    </div>
);
}

I can set custom method as given in official examples as:

Const columns = [{"title":"Apple","field":"apple"}{"title:"Banana","field":"banana",editComponent:props=>(<input
    type="text"
    value={props.value}
    onChange={e => props.onChange(e.target.value)}
  /> )}]

But I want to use my custom component for my project.

I'm able to render my select item on the input but unable to set it in the field.

P.S.: I have gone through solution mentioned in : "https://stackoverflow.com/questions/56576286/how-to-use-custom-editcomponent-in-material-table"

But I'm not able to completely grasp the concept.

Answer 1

I think this will help u.

{
  title: "Description",
  field: "description",
  editComponent: props => ( <
    Autocomplete options = {
      selectedProductOptions
    }
    getOptionLabel = {
      (option) => option.name
    }
    onChange = {
      e => {
        props.onChange(e.target.innerText)
      }
    }
    renderInput = {
      (params) =>
      <
      MuiTextField { ...params
      }
      helperText = {
        props.helperText
      }
      error = {
        props.error
      }
      variant = "standard" /
      >
    }
    />
  ),
  validate: (rowData) =>
    rowData.description === undefined ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    rowData.description === '' ?
    {
      isValid: false,
      helperText: 'Required *'
    } :
    true

},

I have used material ui autocomplete here. u have to use the onChange = {e => {props.onChange(e.target.innerText)}} attribute.

If u need more explaining be free to ask