add item to cart page with react ( only with this.state ) - reactjs

Question

its a long explaition it will be easier if you see screenshots first!
i'm trying to make a website, which inside 3 divs, with 3 different backgrounds. under those 3 divs there are 3 rows of buttons with different colors
you click on a color, it changes the background of one of the main divs. it will be more clear with the image/codesandbox i give here
each click you make changes "this.state.color1" or "color2" to the color you clicked on.
what i wanna do is add a "saved selection page", which you can see color combinations you saved by clicking another buttons called "save".
each click on this save button should return the 3 current colors, send them over to "Saved" page, and they should stay there and never change.
and if you click the save button again, it keeps the previous selections, and add the new one under the previous one.
kinda the same way we click on "add to cart" on websites.
i tried over a week to figure it out by many different ways, like putting a new state called "savedColors" and stuff like that but i didnt figure it out.
here it is on codesandbox
main page:
import React from "react";
import "./main.style.css";
import Buttons1 from "../buttons/buttons1-component";
import Buttons2 from "../buttons/buttons2-component";
import Buttons3 from "../buttons/buttons3-component";
import Saved from "../saved/saved.component";
class Main extends React.Component {
constructor(props) {
super(props);
this.changeColor1 = this.changeColor1.bind(this);
this.changeColor2 = this.changeColor2.bind(this);
this.changeColor3 = this.changeColor3.bind(this);
this.changeToSavedPage = this.changeToSavedPage.bind(this);
this.goToMainPage = this.goToMainPage.bind(this);
this.saveScheme = this.saveScheme.bind(this);
this.state = {
color1: "#fff285",
color2: "#38306b",
color3: "#c4cc90",
page: "main"
};
}
changeToSavedPage() {
this.setState({ page: "saved" });
}
goToMainPage() {
this.setState({ page: "main" });
}
changeColor1(id) {
this.setState({
color1: id
});
}
changeColor2(id) {
this.setState({
color2: id
});
}
changeColor3(id) {
this.setState({
color3: id
});
}
saveScheme() {
alert("see notes in the function");
// hey guys thanks for looking at my code,
// so what im trying to, is to get all 3
// current colors thats been seleceted.
// pass them over to "saved page", and show them there,
// each time you click "save selection" button,
// it will show the NEW CURRENT selection in the saved page.
// but will NOT delete the previos selection, just add a new one
// kind a like Add To Cart button!
}
render() {
return (
<div className="container">
{this.state.page === "main" && (
<div>
<div className="main-colors">
<div
className="color"
style={{ backgroundColor: this.state.color1 }}
>
<h1>color 1</h1>
</div>
<div
className="color"
style={{ backgroundColor: this.state.color2 }}
>
<h1>color 2</h1>
</div>
<div
className="color"
style={{ backgroundColor: this.state.color3 }}
>
<h1>color 3</h1>
</div>
</div>
<div className="buttons-container">
<p>change color 1:</p>
<Buttons1 changeColor1={this.changeColor1} />
<p>change color 2:</p>
<Buttons2 changeColor2={this.changeColor2} />
<p>change color 3:</p>
<Buttons3 changeColor3={this.changeColor3} />
</div>
<div className="btns">
<button onClick={() => this.saveScheme()}>save selection</button>
<button onClick={() => this.changeToSavedPage()}>
go to saved page
</button>
</div>
</div>
)}
{/* saved page */}
{this.state.page === "saved" && (
<Saved goToMainPage={this.goToMainPage} />
)}
</div>
);
}
}
export default Main;
saved page:
import React from "react";
import "./saved.styles.scss";
import SavedPiece from "../saved-piece/saved-piece.component";
class Saved extends React.Component {
constructor(props){
super(props);
// this.num = this.props.isClicked;
this.state = {
}
}
render(){
return(
<div className="saved-container">
<h1>saved</h1>
{/*
here we should see the saved combinations....
*/}
</div>
)
}
}
export default Saved;

Answer 1

import React from "react";
const Saved = (props) => {
const {saved} = props
return (
<>
<div className="saved-container">
<h1>saved matches page</h1>
{
saved && saved.map((obj, i) => {
return <div className="main-colors" key = {i}>
<div
className="color"
style={{ backgroundColor: obj.color1 }}
>
<h1>color 1</h1>
</div>
<div
className="color"
style={{ backgroundColor: obj.color2 }}
>
<h1>color 2</h1>
</div>
<div
className="color"
style={{ backgroundColor: obj.color3 }}
>
<h1>color 3</h1>
</div>
</div>
})
}
<button onClick={() =>
props.goToMainPage()}>
back to main page
</button>
</div>
</>
)
}
export default Saved;
import React from "react";
import React from "react";
import "./main.style.css";
import Buttons1 from "../buttons/buttons1-component";
import Buttons2 from "../buttons/buttons2-component";
import Buttons3 from "../buttons/buttons3-component";
import Saved from "../saved/saved.component";
class Main extends React.Component {
constructor(props) {
super(props);
this.changeColor1 = this.changeColor1.bind(this);
this.changeColor2 = this.changeColor2.bind(this);
this.changeColor3 = this.changeColor3.bind(this);
this.changeToSavedPage = this.changeToSavedPage.bind(this);
this.goToMainPage = this.goToMainPage.bind(this);
this.saveScheme = this.saveScheme.bind(this);
this.state = {
color1: "#fff285",
color2: "#38306b",
color3: "#c4cc90",
page: "main",
saved: []
};
}
changeToSavedPage() {
this.setState({ page: "saved" });
}
goToMainPage() {
this.setState({ page: "main" });
}
changeColor1(id) {
this.setState({
color1: id
});
}
changeColor2(id) {
this.setState({
color2: id
});
}
changeColor3(id) {
this.setState({
color3: id
});
}
saveScheme() {
const { color1, color2, color3 } = this.state
this.setState({
saved: [
...this.state.saved,
{
color1,
color2,
color3
}
]
})
}
render() {
return (
<div className="container">
{this.state.page === "main" && (
<div>
<div className="main-colors">
<div
className="color"
style={{ backgroundColor: this.state.color1 }}
>
<h1>color 1</h1>
</div>
<div
className="color"
style={{ backgroundColor: this.state.color2 }}
>
<h1>color 2</h1>
</div>
<div
className="color"
style={{ backgroundColor: this.state.color3 }}
>
<h1>color 3</h1>
</div>
</div>
<div className="buttons-container">
<p>change color 1:</p>
<Buttons1 changeColor1={this.changeColor1} />
<p>change color 2:</p>
<Buttons2 changeColor2={this.changeColor2} />
<p>change color 3:</p>
<Buttons3 changeColor3={this.changeColor3} />
</div>
<div className="btns">
<button onClick={() => {
console.log(this.state.saved)
this.saveScheme()
}}>save selection</button>
<button onClick={() => {
this.changeToSavedPage()
}}>
go to saved page
</button>
</div>
</div>
)}
{/* saved page */}
{this.state.page === "saved" && (
<Saved
goToMainPage={this.goToMainPage}
saved = {this.state.saved}
/>
)}
</div>
);
}
}
export default Main;
We added an array to our main component state called saved, then when a user saves, we update the state by adding the values of the current selections, and using the spread operator to maintain the old selected values and not mutate them. Then we pass our saved array as a prop to our child component, and we map it.