ReactJS - Share data between two different components without state

user_9688978 0
Viewed 35

I want to share data between two components and in the second component , I want to use the data only , I do not want to display anything. Ex : share data from App.js to Strawberry.js and use it for some manipulations and not show it in html. THanks in Advance.

App.js
function App() {
  let data1 = {
    test : "Strawberry"
  }
  

  
  return (
    <>
    <div className="App">
        <h1>Hello World!</h1>
     <Apple></Apple>
     <Banana></Banana>
    </div>
         <Strawberry data = {JSON.stringify(data1)}></Strawberry>
</>
  );
}

Strawberry.js

export const Strawberry = (props) => {
    console.log (props.data)
    return  props.data
}
reactjs
1 Answers

What you're saying sounds like exactly what you're showing. Passing data through props from one component to another.

As of right now, as long as you are properly importing and exporting your files, you should have correct passing of data to Strawberry

Your issue might be in in importing your functions properly. Make sure you are using import { Strawberry } from 'path/to/Strawberry' at the top of your file.

If this is not helpful, please add additional context and I can help more with more info.

user_191176900
Related