how to get a portion of useState stored data in another useState-CodePudding

In the project that I am working on currently I am fetching data from sanity and storing that data in a useState(), and that data is a collection of multiple restaurants, each restaurant has different sections that themselves have dishes.

I am displaying the sections name as a list in my webpage,

|-> I added to each list a onclick that run a filter function each time the section is clicked but the problem here is how to get the data

                {restaurantSections.map((section) => (
                  <li
                    key={section._id}
                    onClick={() => {
                      // setSectionsVisibility(false);
                      filter(section.name);
                      console.log(section.name)
                    }}
                  >
                    <div>
                      {restaurantData.image ? (
                        <img src={urlFor(section.image).url()} alt="food" />
                      ) : (
                        <img src={foodImg} alt="food" />
                      )}
                      <h1>{section.name}</h1>
                      <span>
                        <HiArrowSmRight size={20} className="arrowIcon" />
                      </span>
                    </div>
                  </li>
                ))}
              </ul>

|-> And this here is my useState and functions:

  const { slug } = useParams();
  const [restaurantData, setRestaurantData] = useState([]);
  const [sectionsVisibility, setSectionsVisibility] = useState(true);
  useEffect(() => {
    sanityClient
      .fetch(
        `
        *[slug.current == "${slug}"] {
          ...,
          sections[] -> {
            ...,
            dishes[] ->
          }
        }`
      )
      .then((data) => {
        setRestaurantData(data[0]);
      });
  }, [slug]);

  let restaurantSections = restaurantData.sections;
  const  [dishesData, setDishesData] = useState([]);

  const filter = (name) => {
    setDishesData(restaurantSections.filter((section) => section.name === name));
  };

|-> Can anyone please guide me to a solution that will make me able to store the restaurantData.sections in a useState so that I can use it in the filter function.

|-> Or if you have a better approach to this problem please help me with it.

CodePudding user response：

|-> Can anyone please guide me to a solution that will make me able to store the restaurantData.sections in a useState so that I can use it in the filter function.

Create a new state restaurantSections and setRestaurantSections after you fetch the data from Sanity.

  const { slug } = useParams();
  const [restaurantData, setRestaurantData] = useState([]);
  
  // New state
  const [restaurantSections, setRestaurantSections] = useState([]);

  const [sectionsVisibility, setSectionsVisibility] = useState(true);
  useEffect(() => {
    sanityClient
      .fetch(
        `
        *[slug.current == "${slug}"] {
          ...,
          sections[] -> {
            ...,
            dishes[] ->
          }
        }`
      )
      .then((data) => {
        setRestaurantData(data[0]);

        // Set restaurant sections state
        setRestaurantSections(data[0].sections);
      });
  }, [slug]);

  /* Remove this since we already have the new state
  let restaurantSections = restaurantData.sections;*/
  const  [dishesData, setDishesData] = useState([]);

  const filter = (name) => {
    setDishesData(restaurantSections.filter((section) => section.name === name));
  };

Going a little bit further, if I understand correctly, you'll want to set your filter function to:

  const filter = (name) => {
    setRestaurantSections(restaurantSections.filter((section) => section.name === name));
  };