ozcanzaferayan

<input value={todo} onChange={(e) => setTodo(e.target.value)} />

ozcanzaferayan

const [todo, setTodo] = useState("");

ozcanzaferayan

const [todoList, setTodoList] = useRecoilState(todoListState);

ozcanzaferayan

import React from "react";
import { useRecoilValue, atom } from "recoil";

const todoListState = atom({
  key: "todoListState",
  default: ["Apples", "Eggs", "Butter"],
});

function App() {
  const todoList = useRecoilValue(todoListState);

ozcanzaferayan

import { useRecoilValue, atom } from "recoil";

const todoListState = atom({
  key: 'todoListState',
  default: ['Apples', 'Eggs', 'Butter'],
});

ozcanzaferayan

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { RecoilRoot } from "recoil";

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>

ozcanzaferayan

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={() => setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge

ozcanzaferayan

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

ozcanzaferayan

function Text() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return <p style={{fontSize}}>This text will increase in size too.</p>;
}

ozcanzaferayan

function FontButton() {
  
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);

  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}