How to organize functionality across react components?

sempraEdic

I have some React Components:

  1. Row component, here is the snippets:
export default Row() {
    return (
        <>
            <div className="grid grid-4-cols">
                // Here is the cell details
                ...
                // Code below are one of  the cell
                <div>
                    <button id="show-modal" type="button" onclick={showModal}></button>
                <div>
                ...
            <div>
        </>
    );
}
  1. Modal component
export default Modal() {
    return (
        // Below are elements in the modal
        <div>
            ...
        </div>
    );
}
  1. Table component
import Row from "./Row";
import Modal from "./Modal";

export default function Table {
    // I am trying to use React Hook
    const [modalOn, setModalOn] = useState(false);

    return (
        <>
            <div>
                // Some table features
                <Row/>
                <Row/>             
            </div>
            {modalOn && <Modal/>}
        </>
    )
}

I want to implement so that when show-modal button being clicked, the modalOn are set to true. Where to implement this showModal function?

Mina

So, you need to declare the showModal function in the Table component, which will change modalOn state to true, and pass it as prop to the Row components.

Row component

export default Row({ showModal }) {
    return (
        <>
            <div className="grid grid-4-cols">
                // Here is the cell details
                ...
                // Code below are one of  the cell
                <div>
                    <button id="show-modal" type="button" onclick={showModal}></button>
                <div>
                ...
            <div>
        </>
    );
}

Modal component

export default Modal() {
    return (
        // Below are elements in the modal
        <div className="hidden">
            ...
        </div>
    );
}

Table component

import Row from "./Row";
import Modal from "./Modal";

export default function Table {
    // I am trying to use React Hook
    const [modalOn, setModalOn] = useState(false);
    const showModal = () => {
       setModalOn(true)
    }

    return (
        <>
            <div>
                // Some table features
                <Row showModal={showModal}/>
                <Row showModal={showModal} />             
            </div>
            {modalOn || <Modal/>}
        </>
    )
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Angular - How To Organize CSS Overrides Across Components For The App

How better organize React-components interactions?

How to implement a gameloop with requestAnimationFrame across multiple React Redux components?

How to handle one-time event across components in React?

How to create a global lookup table in React that is quickly accessible across components?

React sharing method across components

Using props in React with styled components across components

How to organize Redux state for reusable components?

Right way to manage components functionality in React

How to organize fetched data in React

Share react native components across repos

Sharing a JavaScript class across multiple React components

React newbie: sharing state across unlinked components

Checkbox keeps state across components in React JS

React js and PropTypes repetition across shared components

Send multiple props across components React

Vertx Web: How to split and organize routes across multiple files?

How to Organize Formatters Across Different Source Code Files

How to preserve JWT token across Angular components

How to share common functions across multiple components

How to transfer windows across after changing components

How to organize React Native with Realm project files?

How to organize state with redux and react-router?

How to organize flowtype in react + redux project

How to well organize elements (jsx/css) in react

How to Implement tab functionality in React

React how should be the like functionality

Reuse React.useCallback() function across multiple components

Techniques for sharing a global state across functional components in React Native

TOP Ranking

HotTag

Archive