2

I have two .js files wherein I am defining two different components: A.js and B.js. I have a constant named value defined in B.js which uses the UseState hook, so when I try to import B into A.js I want to access one constant defined in B.js. Here's my code for a better clarity.

B.js

import clickcomponent from ".../..xxx"
export function B(){
...
...
const[value, setvalue]= useState("");
...
...
return(
 <clickcomponent
    ...
    ...
    onClick={newValue => {
        setvalue(newValue ? newValue : []);
      }}
  />
);
}

A.js

import B from "B.js"
export default function A(){
...
...
return (
    <B/>
  );
 }

I want to access the value of const value defined in B.js in A.js. How to achieve that?

Improve this question

3 Answers 3

Reset to default
4

You can define a callback function in component A which receives value from B.

import B from "B.js"
export default function A(){

const receiveValue = (value) => {console.log("value received from B",value)}

return (
 <B receiveValue={receiveValue} />
);
}

Now in your B you have to call that callback function which you passed in props from A component and pass any value you want to pass.

import Clickcomponent from ".../..xxx"
export default function B(props){
return(
  <Clickcomponent onClick={() => {
    props.receiveValue(5);
  }}
 />
);

Note: also change your import clickcomponent to import Clickcomponent because component names first letter should be capital.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

In console it shows: value received from B[object Object]
yes because in component B we were passing object. I have updated code and now i am passing number 5. Now it will be passed to component A and will be shown in console.
yes its just a function you can put any code in that.
I just did console.log to show that value is received by A.
You can do anything inside that function.
|
0

You can achieve this by lifting component B state up.

B.js

import React, { useState } from "react";

const B = ({ liftingStateUpHandler }) => {
  const [value, setValue] = useState("You got me");

  return (
    <button onClick={() => liftingStateUpHandler(value)}>
      Click me to lift state up
    </button>
  );
};

export default B;

A.js

import React, { useState } from "react";
import B from "./B";

const A = () => {
  const [stateA, setStateA] = useState("");

  const getState = value => setStateA(value);

  return (
    <>
      <div>State from component B: {stateA}</div>
      <B liftingStateUpHandler={getState} />
    </>
  );
};

export default A;

Here is more about lifting state up and example on codesandbox.

Improve this answer

Comments

0

You can pass down a callback from A, to B wherein A can have access to the component fully, while B still has the ability to access it. This is done through the concept of props in react.

Pseudo Code

A

import B from "B.js"
export default function A() {
...
const[value, setvalue]= useState("");
return (
    <B callback={(value) => setvalue(value)}/>
  );
 }

B

import clickcomponent from ".../..xxx"
export default function B(props){
...
...
return(
 <clickcomponent
    ...
    ...
    onClick={newValue => {
        props.callback(newValue ? newValue : []);
      }}
  />
);
}

Sandbox link for the visual effect here.

I hope this helps.

Improve this answer

1 Comment

This was just pseudo code to help you. I'll attach a sandbox link now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.