Getting error on the lift state up between the 2 react components need & tried various method passing between the 2 components

Question

Tried to fix the issue in various methods and ways but it's not fixing. I am not able to know why it's getting an error I don't understand the exact issue in the code. Could anyone help with the solution?

ref: https://codesandbox.io/s/gifted-gagarin-k54vf

<TextField
              id="productTitle"
              name="title"
              label="Product Title"
              ariaLabel="Product Title"
              value={values.title}
              onChange={handleChange}
              onBlur={handleBlur}
              error={!!errors.title}
              helperText={errors.title ? errors.title : ""}
              showLabelHelperText={false}
              labelHidden={true}
              inputProps={{ maxLength: 60 }}
            />


    
    
    
              <Grid item xs={12} sm={10}>
                <Typography color="textSecondary" className={classes.newproducts}>
                {values.title || "New Product"}
                </Typography>
              </Grid>

Hi how can do the react lift state up between this 2 component the first-1 text field is one component(Form.js) and the Grid part is in another component file(app.js) if i try to change the text field it needs to updated replaing the new Product with the entered text-field

u can use this approach as reference for codesand box https://codesandbox.io/s/lifting-state-up-example-1-hooks-forked-ygfbh

Answer 1

Problems with your code

1. Missing Value
2. Using <Link/> outside <Router/> .

Fix 1: User simple ternary operator when you are not sure

/src/App.js:61

{values && values.title? values.title: "New Product"}

Fix 2:

Never use <Link/> outside <Router>

Updated Example:

https://codesandbox.io/s/romantic-pine-qym61?file=/src/App.js:1599-1654