Pass data from one component to another using ReactJS

Question

I have the following in App.js

let contracts = [
 {
   id: "1",
   name: "Lloyds",
   image: ""
 }
];

class App extends Component {
 render() {
   return (
     <div>
       <Header />
       <Search />
       <ContractsList />
       <Content />
       <Footer />
     </div>
   );
 }
}

export default App;

Im trying to pass the contracts variable as a prop in my index.js file

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap-grid.css";

ReactDOM.render(
 <React.StrictMode>
   <App contracts={contracts} />
 </React.StrictMode>,
 document.getElementById("root")
);

but keep getting the following error:

 Line 10:21:  'contracts' is not defined  no-undef

how can i use the contracts variable so it can be used as a prop in other components?

Atin Singh · Accepted Answer · 2020-04-03 13:33:13Z

1

You need to shift your contracts array from app.js to index.js and then pass it as a props.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap-grid.css";

let contracts = [
 {
   id: "1",
   name: "Lloyds",
   image: ""
 }
];

ReactDOM.render(
 <React.StrictMode>
   <App contracts={contracts} />
 </React.StrictMode>,
 document.getElementById("root")
);

answered Apr 3, 2020 at 13:33

Atin Singh

3,6902 gold badges21 silver badges25 bronze badges

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

Comments

torquan · Accepted Answer · 2020-04-03 13:31:58Z

0

contracts is not defined in your index.js file. Either you define contracts there, or you import it.

And then, you need to pass it to the underlying components in App.js too, for example:

<Content contracts={this.props.contracts} />

(For every component in which you need it.) Why are you trying to pass it in index.js at all?

answered Apr 3, 2020 at 13:31

torquan

3541 silver badge6 bronze badges

Comments

Yash Joshi · Accepted Answer · 2020-04-03 13:32:06Z

0

The error is coming on the index.js file on this line:

 <App contracts={contracts} />

here you dont have any variable called contracts, you may need to put a variable contracts in this file instead of App.js.

Hope this helps!

answered Apr 3, 2020 at 13:32

Yash Joshi

2,8441 gold badge15 silver badges22 bronze badges

Comments

breakfast · Accepted Answer · 2020-04-03 13:32:08Z

0

You've defined contracts in a different file to the one you're trying to use it in. Define contracts in index.js and it'll work.

answered Apr 3, 2020 at 13:32

breakfast

831 silver badge6 bronze badges

Comments

prasanth · Accepted Answer · 2020-04-03 13:33:31Z

0

you need to export the contracts

Demo

App.js

export const contracts = [
 {
   id: "1",
   name: "Lloyds",
   image: ""
 }
];

index.js

import App,{contracts} from "./App";

For better. its already in app.js . so you can access with in app.js .no need to pass from index.js

answered Apr 3, 2020 at 13:33

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Collectives™ on Stack Overflow

Pass data from one component to another using ReactJS

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related