Pass selected dropdown value to component to refresh table-CodePudding

In my app, I have several components that I'm using and I need to pass a parameter to it from the selected value in my drop down. How can I pass the value to the component and load a table? (data is from an API)

The app is setup as: The component with the dropdowns (I'll show one for this) service.js

import ServiceCustomerNotes from '../details/customerNotes'
const viewServiceCalls = () => {
  useEffect(() => {
    getServiceNotes(id); //id is passed from a menu option

  }

  const serviceChange = async() => {
     setCustomerId({ ...customerId, customerId: e.target.value});
  }

  return (
      <div>
        <!-- for simplicity option values are hardcoded -->
        <select name="serviceNotes" onChange={serviceChange}>
          <option value="0">Select Customer</option>
          <option value="1">Smith</option>
          <option value="2">Jones</option>
        </select>
      </div>

    <div>
      <ServiceCustomerNotes
         noteId={}
      /> 
    </div>
   )
}

The customer service notes component

const SericeCustomerNotes = ({ noteId }) => {
   // this is where I'm stuck, how do I get the noteId from the dropdown on the serice.js 
      component? I have my calls to the API to get data working (hardcoded for testing), I need to 
      get the noteId passed into this. 

}

CodePudding user response：

const viewServiceCalls = () => {
    const [customerId, setCustomerId] = useState(0);

    useEffect(() => {
        getServiceNotes(id); //id is passed from a menu option
    }, []);

    const serviceChange = (e) => {
        setCustomerId(e.target.value);
    };

    return (
        <div>
            <div>
                <select name="serviceNotes" onChange={serviceChange}>
                    <option value="0">Select Customer</option>
                    <option value="1">Smith</option>
                    <option value="2">Jones</option>
                </select>
            </div>

            <div>
                <ServiceCustomerNotes noteId={customerId} />
            </div>
        </div>
    );
};

Guess this is what you want.

Explanation: hook useState will hold the current customerId, whenever you call setCustomerId (which is returned from useState) the component will re-render and update value will be passed to ServiceCustomerNotes component

CodePudding user response：

import React, { useEffect, useState } from "react";
import ServiceCustomerNotes from "../details/customerNotes";

const ViewServiceCalls = () => {
  const [customerId, setCustomerId] = useState(0);

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

  return (
    <div>
      <div>
        <select name="serviceNotes" onChange={onChange}>
          <option value="0">Select Customer</option>
          <option value="1">Smith</option>
          <option value="2">Jones</option>
        </select>
      </div>

      <div>
        <ServiceCustomerNotes id={customerId} />
      </div>
    </div>
  );
};

// Your call to the API
// Need to be outside of your component and used in a useEffect like above
async function fetchNote(id) {
  const result = await fetch(`https://....../${id}`);
  if (result.ok) return result.json();

  return Promise.reject(Error("No result"));
}

const ServiceCustomerNotes = ({ id }) => {
  const [note, setNote] = useState();
  const [error, setError] = useState();

  // fetch your component data here, not in parent component
  useEffect(() => {
    if (id === 0) return;
    // never await result in a useEffect
    fetchNote.then(setNote).catch(setError);
  }, [id]); // when id change, API is call again with the new id

  if (!note) return null;

  // or do what you want when error
  return <div>{note}</div>;
};

Maybe it could help :)

I put some comments in the snippet.

Happy coding !