eamonnboyle

function App() {
  const [locationSearch, setLocationSearch] = useState('Paris');
  const [locations, setLocations] = useState(['Belfast', 'Dublin']);

  return (
    ...
    <table>
      <thead>
      <tr>
        <th>Name</th>

eamonnboyle

<tbody>
{locations.map(location =>
  <tr><td>{location}</td></tr>
)}
</tbody>

eamonnboyle

<button onClick={() => setLocations([locationSearch, ...locations])}>Search</button>

eamonnboyle

const disableSearch = locationSearch.trim() === '';
const addLocation = () => {
  setLocations([locationSearch, ...locations]);
  setLocationSearch('');
};

return (
    ...
    <button onClick={addLocation} disabled={disableSearch}>Search</button>

eamonnboyle

function App() {
  const [locationSearch, setLocationSearch] = useState('');
  const [locations, setLocations] = useState<string[]>([]);

eamonnboyle

import 'bootstrap/dist/css/bootstrap.min.css';

eamonnboyle

function App() {
  ...
  return (
    <div className="container">
      <h1>Weather App</h1>
      <div>
        <label>
          Add Location
          <input className="ml-1 mr-1" type="text" value={locationSearch}
                 onChange={e => setLocationSearch(e.target.value)}/>

eamonnboyle

import React from "react";
import {FC, useState} from "react";

export const LocationSearch: FC = () => {
  return (
    <div>
      <label>
        Add Location
        <input className="ml-1 mr-1" type="text" value={locationSearch}
               onChange={e => setLocationSearch(e.target.value)}/>

eamonnboyle

export const LocationSearch: FC = () => {
  const [locationSearch, setLocationSearch] = useState('');
  const disableSearch = locationSearch.trim() === '';
  ...

eamonnboyle

  ...
  <LocationSearch prop1={...} prop2={...}/>
  ...