search

rbi-learning / Today-I-Learned

1 stars 0 forks source link

8/25 Official Notes #169

Open Stommy123 opened 4 years ago

Stommy123 commented 4 years ago

08/25 Day 21 Lecture Notes

Props Recap

// passing props
<Turtle
 name="leonardo"
 color="blue"
 weapon="katanas"
 description="some long description"
 image="some url"
>
<Turtle
 name="rafael"
 color="red"
 weapon="sai"
 description="another long description"
 image="another long description"
>

// accessing props
const Turtle = props => {
  console.log(props.name);
  console.log(props.color);
  console.log(props.weapon);
  console.log(props.description);
  console.log(props.image);
}

JSS Recap

<div style={{ backgroundColor: 'red' }} />
const someStyles = { backgroundColor: 'red' };

<div style={someStyles}> />

Buttons and Forms

<form>
  <button type="button">Click me to NOT submit the form</button>
  <button type="submit">Click me and the form WILL submit</button>
</form>

Rendering a collection (mapping over an array)

const App = () => (
  <main>
    {turtles.map(turtle => <Turtle key={turtle.name} name={turtle.name}>)}
  </main>
)
// please don't ever do this.
const App = () => (
  <main>
    <Turtle
      name={turtles[0].name}
      color={turtles[0].color}
      weapon={turtles[0].weapon}
      description={turtles[0].description}
      image={turtles[0].img}
    />
    <Turtle
      name={turtles[1].name}
      color={turtles[1].color}
      weapon={turtles[1].weapon}
      description={turtles[1].description}
      image={turtles[1].img}
    />
    <Turtle
      name={turtles[2].name}
      color={turtles[2].color}
      weapon={turtles[2].weapon}
      description={turtles[2].description}
      image={turtles[2].img}
    />
    <Turtle
      name={turtles[3].name}
      color={turtles[3].color}
      weapon={turtles[3].weapon}
      description={turtles[3].description}
      image={turtles[3].img}
    />
  </main>
)

<Component {...item} />

const propsIWantToPass = {
  name: 'Andy',
  age: 12,
  occupation: 'Software Engineer'
}

<ExampleComponent {...propsIWantToPass}>

useEffect

useEffect(EFFECT_CALLBACK, DEPENDENCIES)

useEffect(() => {
  console.log('foo has changed!')
}, [foo])
const App = () => {
  const [turtles, setTurtles] = useState([]);

  const fetchTurtles = async () => {
    const response = await fetch(URL);
    const turtleData = await response.json();
    setTurtles(turtleData)
  }

  useEffect(() => {
    fetchTurtles()
  }, [])

  return (
    // some jsx mapping over turtles
  )
}

Callouts for useEffect

const [someState, setSomeState] = useState(0);

// infinite loop - This `effect` will update the `state` of `someState` which is also the dependency for the `effect`
useEffect(() => {
  setSomeState(someState + 1)
}, [someState])

// no infinite loop - This `effect` will only run update `state` if `someState` meets a specific condition
useEffect(() => {
  if (someState === 0) {
    setSomeState(100)
  }
}, [someState])

Putting it all together

const App = () => {
  // ref-1
  const [games, setGames] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  // ref-2
  const fetchGames = async () => {
    const response = await fetch(`GAMES_API_URL?filter=${searchTerm}`);
    const gameData = await response.json();

    setGames(gameData);
  };

  // ref-3
  useEffect(() => {
    fetchGames();
  }, []);

  // ref-4
  const handleInputChange = event => {
    setSearchTerm(event.target.value);
  };

  // ref-5
  const handleFormSubmit = event => {
    event.preventDefault();
    fetchGames();
  };

  // ref-6
  return (
    <main>
      <form onSubmit={handleFormSubmit}>
        <input type="text" onChange={handleInputChange} value={searchTerm} />
        <button type="submit">Search!</button>
      </form>
      {games.map(game => <Game key={game.id} title={game.title} />)}
    </main>
  )
}