Iterating over fetched data from API

Question

I'm fairly new to Reactjs and I'm trying to create a webpage which takes in a user input and then fetches data from an API before iterating over the fetched data, comparing the user input to properties of the array in order to the access another property of the user selected object.

My code is below, it compiles ok but when trying to iterate over the objects in the Stations array it logs the first objects area property no matter what the user inputs, for example if user inputs 'Somerset' it still returns the 'area' property of the first object in the array which is not Somerset. Appreciate there's no validation or error handling at the moment. Any help would be appreciated.

import './App.css';
import { useRef } from 'react';

function App() {
  const nameInputRef = useRef();

  async function fetchData() {
    const enteredValue = nameInputRef.current.value;
    console.log(enteredValue);
    const response = await fetch(
      'https://environment.data.gov.uk/flood-monitoring/id/floodAreas'
    );
    const data = await response.json();
    const newdata = await data.items;
    const Stations = await newdata.map(myFunction);
    function myFunction(value) {
      return {
        id: value.fwdCode,
        county: value.county,
        area: value.eaAreaName,
        label: value.label,
        polygon: value.polygon,
        loc: value.riverOrSea,
      };
    }
    console.log(Stations);
    let result = Stations.find(
      ({ enteredValue }) => enteredValue === Stations.county
    );
    let area = result.area;
    console.log(area);
  }

  return (
    <div className="App">
      <section>Input your County</section>
      <br />
      <input type="text" ref={nameInputRef}></input>
      <br />
      <button onClick={fetchData}>Show data here..</button>
    </div>
  );
}
export default App;

Answer 1

You did everything right but when you are comparing the value is where you did the mistake. You wrote ({ enteredValue }) => enteredValue === Stations.county instead of ({ county }) => enteredValue === county as you are not extracting enteredValue from Stations it's county.

So the updated code will be

import { useRef } from 'react';

function App() {
  const nameInputRef = useRef();

  async function fetchData() {
    const enteredValue = nameInputRef.current.value;
    console.log(enteredValue);
    const response = await fetch(
      'https://environment.data.gov.uk/flood-monitoring/id/floodAreas'
    );
    const data = await response.json();
    const newdata = await data.items;
    const Stations = await newdata.map(myFunction);

    function myFunction(value) {
      return {
        id: value.fwdCode,
        county: value.county,
        area: value.eaAreaName,
        label: value.label,
        polygon: value.polygon,
        loc: value.riverOrSea,
      };
    }
    console.log(Stations);
    let result = Stations.find(
      ({ county }) => enteredValue === county
    );
    let area = result.area;
    console.log(area);
  }

  return (
    <div className="App">
      <section>Input your County</section>
      <br />
      <input type="text" ref={nameInputRef}></input>
      <br />
      <button onClick={fetchData}>Show data here..</button>
    </div>
  );
}
export default App;