Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to use children array in React

My intention here is to create a search component page, that has a form and a table, that can vary on fields and result.

Let’s supose a component that receive a couple of children:

const SearchPage = ({title}) => {
    function handleSubmit() {...}
    
    return (
        <div>
            <div className="form">
                {chindren[0]}
            </div>
            
            <div className="table">
                {children[1]}
            </div>
        </div>
    )
}

and now using this component:

const MyPage = () => {
    return (
        <SearchPage title="Search for fruits">
            <form onSubmit={handleSubmit}>   <!--this is children[0]-->
                <input useSomethingFromSearchPageHere></input>
                ....
            </form>
            
            <table>                         <!--this is children[1]-->
                ....
            </table>
        </SearchPage>
    )
}

How access SearchPage variables and methods from children fragments?
This is the right way of doing this?

Tags:

2

Answers


  1. 0

    How about using props, i know this goes against question but it is the best way to do this. I also added types for clarity but please omit if not using typescript.

    interface SearchPageProps {
  title: string;
  generateForm: (event: React.FormEvent) => React.ReactNode;
  table: React.ReactNode;
}

export const SearchPage: React.FC<SearchPageProps> = ({ title, form, table }) => {
  const handleSubmit = (event: React.FormEvent) => {
  }

  return (
    <div>
      <h1>{title}</h1>
      <div className="form">
        {generateForm(handleSubmit)}
      </div>

      <div className="table">
        {table}
      </div>
    </div>
  );
};

const MyPage = () => {
  return (
    <SearchPage
      title="Search Page"
      generateForm={(event) => <input useSomethingFromSearchPageHere></input>}
      table={<table></table>}
    />
  );
};
    Login or Signup to reply.
  2. 0

    To achieve your goal of accessing SearchPage variables and methods from its children components, you can utilize React’s context system.

    First, define a new context that will be used to pass the handleSubmit method and any other necessary data or methods.

    import React, { createContext, useContext, useCallback } from 'react';
// Create the context
const SearchPageContext = createContext();
// Custom hook to use the context
export const useSearchPage = () => useContext(SearchPageContext);

    Update the SearchPage component to use the SearchPageContext.Provider to pass down the handleSubmit method and any other necessary state or functions.

    const SearchPage = ({ title, children }) => {

 const handleSubmit = useCallback((event) => {
     event.preventDefault();
     // Your submit logic here
 }, []);

// The value object includes everything you want to expose to children
const value = { handleSubmit };

return (
    <SearchPageContext.Provider value={value}>
        <div>
            <div className="form">
                {children[0]}
            </div>
            
            <div className="table">
                {children[1]}
            </div>
        </div>
    </SearchPageContext.Provider>
  );
};

    In your child components (e.g., the form inside MyPage), you can now use the useSearchPage hook to access handleSubmit and any other data or methods you’ve provided.

    const MyPage = () => {
const { handleSubmit } = useSearchPage(); // Use the custom hook to access context

return (
    <SearchPage title="Search for fruits">
        <form onSubmit={handleSubmit}>
            <input placeholder="Search..." />
            {/* other form elements */}
        </form>
        
        <table>
            {/* table contents */}
        </table>
    </SearchPage>
 );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search