what you need is a global store, such as Redux or Mobx. That way you can update the state with relevant data and retrieve them on the new page.

If you need a workaround, you could use history.pushState()

Basically you can push to your location and with it a state.

And on the next page, which is MyComp in this case, you could use history.state to retrieve the pushed data.

I am very new to react and just started to build a basic crud application with it. Everything is done besides the update functionality, i got stuck there.I have several bootstrap cards with 2 buttons , delete and update.The data comes from a mysql database and was persisted with hibernate (spring boot on backend).The update button when pressed should pass the id and render a new component(on a different route, guess i need to use Link here) in which a filled form with the respective objects details is presented. Once the user updates the form and clicks submit, he should be redirected to the Cards page. So far i am stuck at the button + Link and rendering the new component phase and for some reason i can’t seem to understand how to make it work.This is my code so far

this is my JSX in which i have the Update button which is in the render method of CarList component which has all the cards.

<ReactBootstrap.Card.Body>
            <ReactBootstrap.Card.Title>{cars.mark}-{cars.model}</ReactBootstrap.Card.Title>
               <ReactBootstrap.Card.Header>Price: {cars.price}</ReactBootstrap.Card.Header>
                 <br />
                     <h6>Fabricated: {cars.year}</h6>
                       <h6>{cars.fuel}</h6>
                         <ReactBootstrap.Button variant="success" className="cardButtons" id="cardButtonGreen" onClick={() => this.handleClickUpdate(cars.id)}> Update</ReactBootstrap.Button>
                         <ReactBootstrap.Button variant="danger" className="cardButtons" id="cardButtonRed" onClick={() => this.handleClickDelete(cars.id)}> Delete</ReactBootstrap.Button>
                       </ReactBootstrap.Card.Body>
                    </ReactBootstrap.Card>
               </div>
             }
        <br />
   </div>

this is my CarList class and the constructor

class CarList extends Component {

    constructor(props) {
        super(props)

        this.state = {
            cars: [],
            error: "",
            deleteError: "",
            updateError: "",
            updateCarId: null,
            buttonWasPressed: false
        }
    }

here i have the function that is triggered on click.I am sating the state to the id of the object that is in that specific card where the update button is.

handleClickUpdate = (carId) => {
        console.log(carId);
        this.setState(
            {
                updateCarId: carId,
                buttonWasPressed: true
            }
        )
    }

and lastly i am rendiring the Component MyComp i want to render by passing in the ID.Line is located in component CarList right under where the Card is.

 {this.state.buttonWasPressed && <MyComp carId={this.state.updateCarId} />}

What this code gives me so far, is that i am able to set the state as the id, and then use the button to display the component, but it is displayed on the same page, right under the card (where the line of code is also located) instead of displaying it in a new page on a new route.I have tried adding Link,Switch, Route, Router, but i am afraid i am not sure how to use it in this exact context with the button, and it is confusing to me so i was not able to make it work.Can you please help me render “MyComp” on a new page with that id ?
Any help would be greatly appreciated.