chetanraj

let user = null;
let age = 12;
let isTeenage = user?.[value++];
console.log('isTeenage :: ', isTeenage);

// Output
isTeenage :: undefined

chetanraj

export const nameStateAtom = atom({
  key: "nameStateAtom", // an unique id
  default: "", // default value
});

chetanraj

const Input = () => {
  
  const [name, setName] = useRecoilState(nameStateAtom);
  const onChange = (event) => {
    setName(event.target.value);
  };
  
  return (
    <div className="input">
      <input placeholder="Enter name" type="text" value={name} onChange={onChange} /><br />

chetanraj

export const nameStateSelector = selector({
  key: "nameStateSelector", // unique ID
  get: ({ get }) => {
    const text = get(nameStateAtom);
    return text;
  },
});

chetanraj

import {atom, selector, useRecoilValue} from 'recoil';

const nameStateAtom = atom({
  key: 'nameStateAtom',
  default: ''
});
const nameStateSelector = selector({
  key: 'nameStateSelector',
  get: ({get}) => get(nameStateAtom)
});

chetanraj

{
  "name": "app-name",
  "version": "0.0.1",
  "dependencies": { },
  "devDependencies": { }
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",

chetanraj

import React from 'react';
import { useName } from '../logics/useName';

const Create = () => {
	const { name, setName } = useName();

	const onChange = e => {
		setName(e.target.value);
	};

chetanraj

import React, { useState } from 'react';

const useName = () => {
	const [name, setValue] = useState('');

	const setName = name => {
		setValue(name);
	};

	return { name, setName };

chetanraj

export const theme = {
	breakpoints: [32, 48, 64],
	space: [0, 4, 8, 16, 24, 32, 48, 64, 128, 256, 512],
	fontSizes: [12, 14, 16, 18, 20, 24, 36, 48, 80, 96],
	fontWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
	lineHeights: {
		normal: 1,
		title: 1.25,
		paragraph: 1.5
	},

chetanraj

import React from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
	color: ${props => props.disabled ? `${props.theme.colors.gray}`	: `${props.theme.colors.darkgray}`};
	font-size: ${props => `${props.theme.fontSizes[2]}px`};
	border: 1px solid;
	border-color: ${props => props.theme.colors[props.borderColor] || props.theme.colors.lightgray};
	background: ${props => props.theme.colors[props.bg] || props.theme.colors.white};
	border-radius: ${props => `${props.theme.radii[2]}`};