synapse-react-client/dist/utils/hooks/useListState.d.ts

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { Dispatch, SetStateAction } from 'react';
export interface ListStateReturn<T> {
    list: T[];
    handleListChange: (index: number) => (changedValue: T) => void;
    handleListRemove: (index: number) => () => void;
    appendToList: (...newItem: T[]) => void;
    setList: Dispatch<SetStateAction<T[]>>;
}
/**
 * This is used when a component's state uses a List<T> and has child components
 * that are responsible for creating, updating, deleting the objects within the List.
 *
 *
 * This should be used in conjunction with list.map() to generate child elements.
 *
 * The handle*() functions will generate a callback function for
 * the child to use to perform an item change, or removal on the list.
 *
 * Generally, appending items to the list will be handled by the parent
 * so appendToList() is just a regular function instead of a function generator
 * For Example:
 *
 * ```
 * export const ParentComponent: React.FunctionComponent<ParentComponentProps> = ({
 *  prop1,
 *  prop2,
 * }) => {
 *    const {list: myList,
 *           handleListChange: handleMyListChange,
 *           handleListRemove: handleMyListPush,
 *           appendToList: handleMyListRemove} = useListState<string>(['asdf','qwerty'])
 *
 *    return (
 *      <div>
 *        myList.map((item, index) => {
            return <ChildComponent
              value={item}
              onChange={handleMyListChange(index)}
              onRemove={handleMyListRemove(index)}
            />
          })
          <button onClick={(event) => {appendToList("some new value")} }> >Add Child</button>
 *      </div>
 *    )
 *
 * }
 * ```
 *
 *
 * @param initialState The initial value of the array
 * @returns an ListStateReturn object containing the useState value and additonal change/remove/push hnndlers. Use object destructuring
 */
export declare const useListState: <T>(initialState: T[]) => ListStateReturn<T>;
//# sourceMappingURL=useListState.d.ts.map