Loli E1ON

const data = database.map(value => ({
  ...value,
  bought: value.id == 1 ? true : value.bought
}));

import * as React from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";

type ChildrenProps = {
  parent: {
    onChange1: (e: React.ChangeEvent<HTMLInputElement>) => void,
    onChange2: (e: React.ChangeEvent<HTMLInputElement>) => void,
  }
};

const Children = (props: ChildrenProps) => <div>
  <input type="text" onChange={props.parent.onChange1}/>
  <input type="text" onChange={props.parent.onChange2}/>
</div>;

const Auth = () => {
  const onChange1 = useCallback((e: React.ChangeEvent<HTMLInputElement>) => alert(1), []);
  const onChange2 = useCallback((e: React.ChangeEvent<HTMLInputElement>) =>  alert(2), []);

  return <Children parent={{onChange1, onChange2}}/>
}

const App = () => <Auth/>;

render(<App />, document.getElementById("root"));

export const showAlert = text => ({
   type: SHOW_ALERT,
   payload: text
});

<div onFocus={onFocus}>
   <input/>
   <div onClick={onClick}>клинки по мне</div>
</div>

const removeClass= (e) => {
    if (!e.target.closest(".nav")) {
      // remove class
    }
};
useEffect(() => {
    document.body.addEventListener("click", removeClass);
    return () => document.body.removeEventListener("click", removeClass);
});

const table = useTable({
          columns,
          data,
          initialState: { pageIndex: 0 },
        },
        useSortBy,
        usePagination
);

return {
    ...state,          // Разворачиваем старое состояние
    isLogged : true,   // обновляем свойства которые нужно
    user: action.user  // обновляем свойства которые нужно
}

Неизменяемым (англ. immutable) называется объект, состояние которого не может быть изменено после создания. Результатом любой модификации такого объекта всегда будет новый объект, при этом старый объект не изменится.

const Button = () => {
  const [state, setState] = useState(false);

  const onClickButton = () => setState(state => !state);

  return (
    <div className={state ? "btn-active" : "btn"} onClick={onClickButton}>
      Button
    </div>
  );
};

const Buttons = () => {
  return (
    <div>
      <Button />
      <Button />
      <Button />
    </div>
  );
};

const App = () => <Buttons />;

ReactDOM.render(<App/>, document.getElementById("root"));

const dispatch = useDispatch();

useEffect(() => {
   dispatch(myAction());
}, [dispatch]);

//action
const plusLike = index => ({
    type: "PLUS_LIKE",
    payload:index
});


const initialState = {
   like: 0
};

//reducer
const reducer = (state=initialState ,action) => {
    switch(action.type){
        case "PLUS_LIKE":
                return {
                      ...state,
                      like: action.payload
                }
        default:
            return state
    }
};

const App = () => {

    const likes = useSelector(state => state.propReducer.like);
    const dispatch = useDispatch();

    return (
        <div>
            <button onClick={ () => dispatch(plusLike(likes+1))}>Like</button>
            { likes }
        </div>
    );
}



const allReducers = combineReducers({
    propReducer:reducer
});

const store = createStore(allReducers);
ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById("root"));

this.setState(state => ({
    ...state,
    key: {
        ...state.key,
        [name]: value
    }
}));