React seems to be behaving very strangely. My guess is that this is because the DOM is painted over when assigning a variable a value of props.match.params. Can someone explain?
My question: when executing a function called useQuery, which is assigned a variable, flight_number, the function executes correctly and returns data. This variable - flight_number - is assigned an integer value of 2.
Why does the function return an error if I replace the variable, flight_number, with another variable, test_variable, also assigned a value of 2, but without first getting that number from props.match.params as a string and then using parseInt?
This returns an error
function Launch(props) {
let { flight_number } = props.match.params
console.log("flight_number", flight_number)
console.log("flight_number type", typeof flight_number)
flight_number = parseInt(flight_number)
let test_variable = 2
const { loading, error, data } = useQuery(LAUNCH_QUERY, {
variables: { test_variable }
})
if (loading) return <p>Loading...</p>
if (error) return <p>Oops.. try again later..</p>
return <p>{data.launch.mission_name}<p>
This returns data as desired
function Launch(props) {
let { flight_number } = props.match.params
console.log("flight_number", flight_number)
console.log("flight_number type", typeof flight_number)
flight_number = parseInt(flight_number)
let test_variable = 2
const { loading, error, data } = useQuery(LAUNCH_QUERY, {
variables: { flight_number }
})
if (loading) return <p>Loading...</p>
if (error) return <p>Oops.. try again later..</p>
return <p>{data.launch.mission_name}<p>
Here’s the full component - I’m using graphQL
import React, { Component, Fragment, useEffect } from "react"
import { Link } from "react-router-dom"
import classNames from "classnames"
import { useQuery, ApolloConsumer, gql } from "@apollo/client"
const LAUNCH_QUERY = gql`
query LaunchQuery($flight_number: Int!) {
launch(flight_number: $flight_number) {
flight_number
mission_name
launch_year
launch_success
launch_date_local
rocket {
rocket_id
rocket_name
rocket_type
}
}
}
`
function Launch(props) {
let { flight_number } = props.match.params
console.log("flight_number", flight_number)
console.log("flight_number type", typeof flight_number)
flight_number = parseInt(flight_number)
let test_variable = 2
const { loading, error, data } = useQuery(LAUNCH_QUERY, {
variables: { flight_number}
})
if (loading) return <p>Loading...</p>
if (error) return <p>Oops.. try again later..</p>
const {
mission_name,
launch_year,
launch_success,
rocket: { rocket_id, rocket_name, rocket_type }
} = data.launch
return (
<div>
<h1 className='display-4 my-3'>
<span className='text-dark'>Mission:</span>
{mission_name}
</h1>
<h4 className='mb-3'>Launch Details</h4>
<ul className='list-group'>
<li className='list-group-item'>Flight Number: {flight_number}</li>
<li className='list-group-item'>Launch Year: {launch_year}</li>
<li className='list-group-item'>
Launch Successful:{" "}
<span
className={classNames({
"text-success": launch_success,
"text-danger": !launch_success
})}
>
{launch_success ? "Yes" : "No"}
</span>
</li>
</ul>
<h4 className='my-3'>Rocket Details</h4>
<ul className='list-group'>
<li className='list-group-item'>Rocket ID: {rocket_id}</li>
<li className='list-group-item'>Rocket Name: {rocket_name}</li>
<li className='list-group-item'>Rocket Type: {rocket_type}</li>
</ul>
<hr />
<Link to='/' className='btn btn-secondary'>
Back
</Link>
</div>
)
}
export default Launch