{item.name}

{item.desc}

</div>
</div>
)}
</section>
);
}
};

I need to have this this.state = { projects: } data object in index.jsand pass it through Projects.js to Project.js.

this.state = { projects: }

index.js

Projects.js

Project.js

Main goal is to manage state without Redux. What is the best way to do that?

3 Answers
3

Just passing the state through props, not need Redux for that:

Example: CodeSandbox

index.js

import React from "react";
import ReactDOM from "react-dom";
import ListItem from "./ListItem";

import "./styles.css";

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
projects: [
{
name: "Smithsonian Institute",
desc: "Description goes here",
img: "https://mir-s3-cdn-cf.net//max_1200/da.jpg"
},
{
name: "Beauty Inc Next Dimension",
desc: "Description goes here",
img: "https://mir-s3-cdn-cf.net/15d.jpg"
},
{
name: "Beyond the Pale Blue Dot",
desc: "Description goes here",
img: "https://mir-s3-cdn-cf.net/5e22.jpg"
}
]
};
}

render() {
return (


ListItem.js

import React from "react";
import Item from "./Item";

export default class ListItem extends React.Component {
render() {
return (
<ul>
{this.props.items.map((item, index) => (
<Item data={item} key={index} />
))}
</ul>
);
}
}


Item.js

import React from "react";

export default class Item extends React.Component {
render() {
const { data } = this.props;
return (
<li>


{data.name}

{data.desc}

You have to manually pass the props down.

<Projects
projects={this.state.projects}
/>

<Project
projects={this.props.projects}
/>


Redux is designed for such cases, when you find yourself merely passing and forwarding props.

As stated on their website, their motivation.

Managing this ever-changing state is hard. If a model can update another model, then a view can update a model, which updates another model, and this, in turn, might cause another view to update. At some point, you no longer understand what happens in your app as you have lost control over the when, why, and how of its state. When a system is opaque and non-deterministic, it's hard to reproduce bugs or add new features.

Well, in this case, you need to use liftStateUp you can lift projects state to index then inside Projects.js pass projects as props to Project.js.

projects

index

Projects.js

Project.js

Index.js:

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
newProjects: undefined;
};
}

receiveFunction = (oldProject) => {
this.setState({ newProjects: oldProject})
}

render() {
return (
<Router>


Projects.js:

export class Projects extends React.Component {
constructor(props) {
super(props);

this.state = {
projects: [
{
name: "Smithsonian Institute",
desc: "Description goes here",
img: "https://mir-s3-cdn-cf.net//max_1200/da.jpg"
},
{
name: "Beauty Inc Next Dimension",
desc: "Description goes here",
img: "https://mir-s3-cdn-cf.net/15d.jpg"
},
{
name: "Beyond the Pale Blue Dot",
desc: "Description goes here",
img: "https://mir-s3-cdn-cf.net/5e22.jpg"
}
]
};
}

liftStateUp = () =>{ // call this function whenever you want to pass the state to parent component
let projects = this.state.projects;
this.props.receiveState(projects);
}

componentDidUpdate(prevProps, prevState){ // you can fire liftStateUp when every change in projects state
if(prevState.projects !== this.state.projects){
this.liftStateUp();
}
}

render() {
return (
<Project data={this.props.newProjects ? this.props.newProjects : this.state.projects} />
);
}
};


Note: liftStateUp function needs to fire so I used componentDidUpdate to listen if projects state changes then it will be passed to the index page or for example you can use onClick method, the important thing that you got the idea.

liftStateUp

componentDidUpdate

onClick

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.