How can i pass data between components?

Question

I am using React Router and now i am stuck trying to send data from a component to another (Home component and ListScreen component)

I need to send a object provided by an API and created in Home component to the ListScreen component in order to continue doing the queries based in this object.

That is the HOME component

import { useEffect, useState } from "react"
import { Link, useNavigate } from "react-router-dom"
import axios from "axios"

function Home() {

    const navigate = useNavigate()

    const [login, set_login] = useState({
        login_email: "",
        login_pwd: ""
    })

    const [error, set_error] = useState(false)

    const ChangeEmailHandler = (event) => {
        set_login({
            ...login,
            login_email: event.target.value
        })
    }

    const ChangePwdHandler = (event) => {
        set_login({
            ...login,
            login_pwd: event.target.value
        })
    }

    const SubmitHandler = (event) => {

        event.preventDefault()

        if(login.login_email.length < 1 || login.login_pwd.length < 4) {
            set_error(true)
        } else {
            axios.get(`https://localhost:7281/${login.login_email}/${login.login_pwd}`)
            .then(response => {
            console.log(response.status)

            if(response.status == 200) {
                navigate('/todo-list')
            }
        })
        }
    }
    return(
        <div className="wrapper teste screen home_container">
     
            <form onSubmit={SubmitHandler} className="login_section">

                <div className="my_labels email">
                <label id="email_label">Email</label>
                <input type="email" onChange={ChangeEmailHandler} placeholder="example@hotmail.com" name="" id="email" />
                </div>

                <div className="my_labels pwd">
                <label>Password</label>
                <input type="password" onChange={ChangePwdHandler} placeholder="At least 4 characters" name="" id="pwd" />
                </div>

                <div>
                    <button type="submit">Login</button>
                </div>
            </form>
       </div>
}`

I don't have content in ListScreen yet. I really need the data first to make this component works `

score -1 · Answer 1 · answered Apr 21 '23 at 18:34

I'm not sure what you're trying to do exactly. However, if you want to send data to another element in your current code, there are several ways.

When moving a page, data can be sent as follows. navigate('/todo-list', { state: response.data });
Using state management. (redux, jotai, context provider, react-query, swr, etc.)

How can i pass data between components?

1 Answers1