CODEWITHSUNDEEP
reactjsstatereact-props
Surge
Surge

Reputation: 101

How can I send state to another component in react?

I would like to ask how can I send state from component to another component? I have 3 components and I want to send data between them. So I have an input component where I handle an IP call and I want to send this shortedLink state to another component, so I can render that data. I don't know that is it clear what I want to do, but I hope so :D

import ShortedLinks from './ShortedLinks'

const testimonials = () => {
    return (
        <div>
            <ShortedLinks />
        </div>
    );
};

export default testimonials;

const shortedLinks = () => {
    return (
        <div>
            <h1>I want to get the state here</h1>
        </div>
    );
};

export default shortedLinks;

const InputSection = () => {
  const [shortedLink, setShortedLink] = useState("")
    
  return (...);
};

export default InputSection;

Upvotes: 1

Views: 3998

Answers (1)

J.dev
J.dev

Reputation: 1045

You can use the props to achieve it like this :

import ShortedLinks from './ShortedLinks'

const Testimonials = () => {
  const [shortedLink, setShortedLink] = useState("")
  return (
      <div>
          <ShortedLinks shortedLink={shortedLink} />   // Pass props here
      </div>
  );
};

export default Testimonials;

And then in your ShortedLinks component

const ShortedLinks = ({shortedLink}) => {    // Get props here
   return (
       <div>
           <h1>{shortedLink}</h1>
       </div>
   );
};

export default ShortedLinks;

And if you can't use the props like this you can use the useContext like this :

import React,{ useState, createContext } from "react";

export const ShortedLinkContext = createContext('');

const InputSection = () => {

  const [shortedLink, setShortedLink] = useState("")
    
  return (
      <ShortedLinkContext.Provider value={shortedLink}>
          ....
      </ShortedLinkContext.Provider>
  );
};

export default InputSection;

And finally you can comsume the context here :

import {ShortedLinkContext} from ....

const ShortedLinks = () => {
 const shortedLink = useContext(ShortedLinkContext);
    return (
      <div>
          <h1>{shortedLink}</h1>
      </div>
    );
};

export default shortedLinks;

Enjoy :)

Upvotes: 3

Related Questions