How do you connect one component to another component in React JS?

When I first started writing React, I remember seeing many different approaches to writing components, varying greatly from one tutorial to another tutorial. Though the framework has matured considerably since then, there doesn’t seem to yet be a firm ‘right’ way of doing things.In ReactJS, components can be connected to one another in various ways depending on your specific use case. Here are a few common methods.

Using Props: Props (short for properties) are used to pass data from a parent component to a child component. The parent component can pass data to the child component by defining a prop on the child component and setting its value to the data that needs to be passed. The child component can access the data by using the prop.

Example :

Parent Component:

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = "Hello World";
  return (
    <ChildComponent data={data} />
  );
}

export default ParentComponent;

Child Component:

import React from 'react';

function ChildComponent(props) {
  return (
    <div>{props.data}</div>
  );
}

export default ChildComponent;

Another example:

// Parent component
function ParentComponent() {
  const data = { name: "John", age: 30 };
  return <ChildComponent data={data} />;
}

// Child component
function ChildComponent(props) {
  return <div>{props.data.name} is {props.data.age} years old.</div>;
}

Using State: Components can also connect to each other through state. State is used to store data within a component and can be updated by calling the setState function. If one component needs to update the state of another component, the parent component can pass a function to the child component as a prop, which the child component can call to update the parent's state.

For example:

// Parent component
function ParentComponent() {
  const [count, setCount] = useState(0);
  const handleIncrement = () => setCount(count + 1);
  return <ChildComponent onIncrement={handleIncrement} />;
}

// Child component
function ChildComponent(props) {
  return <button onClick={props.onIncrement}>Increment</button>;
}

Using Context: Context is a way to pass data through the component tree without having to pass props down manually at every level. Context is often used for global data, such as themes or user authentication, that many components need access to. Context is created using the createContext function, and can be accessed in child components using the useContext hook.

For example:

// Context
const MyContext = createContext("default value");

// Parent component
function ParentComponent() {
  return (
    <MyContext.Provider value="hello">
      <ChildComponent />
    </MyContext.Provider>
  );
}

// Child component
function ChildComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

Using Callbacks: Callbacks are used to pass data or functions from a child component to a parent component. The child component can call a function passed as a prop to pass data or trigger an action in the parent component.

Example:

Parent Component:

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  function handleChildClick(data) {
    console.log(data);
  }
  return (
    <ChildComponent onClick={handleChildClick} />
  );
}

export default ParentComponent;

Child Component:

import React from 'react';

function ChildComponent(props) {
  function handleClick() {
    props.onClick("Hello World");
  }
  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default ChildComponent;

In this example, the child component has a button that when clicked, calls the handleClick function which in turn calls the onClick function passed as a prop by the parent component. The onClick function logs "Hello World" to the console.

Higher-Order Components: You can also use Higher-Order Components (HOCs) to connect components. An HOC is a function that takes a component as an argument and returns a new component with additional functionality.

Here's an example of using an HOC to connect components:

function withLogger(Component) {
  return function(props) {
    console.log(`Rendered ${Component.name} with props`, props);
    return <Component {...props} />;
  }
}

function MyComponent(props) {
  return <p>Hello {props.name}</p>;
}

const ConnectedComponent = withLogger(MyComponent);

function App() {
  return (
    <div>
      <ConnectedComponent name="John" />
    </div>
  );
}

These are just a few examples of how components can connect to each other in React JS. The method you choose will depend on the specific use case and the structure of your application.