object object output of useState hook

Question

Greetings iam in need of help so I am taking an online course of react and I followed sir Kalob step by step but while assigning keyword using usestate() it is printing [object object] instead of the actual keyword which I set using hook and so I tried to look for different solutions from useState("searching for") I changed it to useState({name:"searching for"}) and while assigning it to keyword i changed it from keyword={searchText} to keyword={searchText.name} but still, it's giving me the same output I am out of solutions any help would be appreciated. All necessary screenshots are attached. enter image description here

enter image description here

enter image description here

APP.JS

import Navbar from './components/navbar';
import Home from './components/home';
import React from 'react';
import SearchView from './components/SearchView'
import {useState,useEffect} from 'react';
import AboutView from './components/AboutView';
import {Routes , Route} from 'react-router-dom';
import './App.css';

function App() {
 const[searchResults,setSearchResults] = useState([]);
 const [searchText,setSearchText] = useState('');
 
  return (
    <div>
    <Navbar searchText={searchText} setSearchText={setSearchText}/>
    <Routes>
    <Route path="/" element={<Home />} />
    <Route path='/about' element={<AboutView />} />
    <Route path='/search' keyword= {searchText}searchResults={searchResults} element ={<SearchView />} />
    </Routes>
    </div>
  );
}

export default App;

Navbar.Js

// import App from "../App"
import React from 'react';
import {Link} from 'react-router-dom';

const Navbar = ({searchText,setSearchText}) => {
  const updateSearchText = (e) =>{
    setSearchText(e.target.value)
  }
    return(
      <div>
        <nav className="navbar navbar-expand-lg bg-light">
    <div className="container-fluid">
      <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <Link className="navbar-brand" to="/">Movie Browser </Link>
      <div className="collapse navbar-collapse" id="navbarTogglerDemo03">
        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
          <li className="nav-item">
            <Link className="nav-link active" aria-current="page" to="/">Home</Link>
          </li>
          <li className="nav-item">
            <Link className="nav-link" to="/about">About</Link>
          </li>
          <li className="nav-item">
            <a className="nav-link disabled" href="/">Disabled</a>
          </li>
        </ul>
        <form className="d-flex" role="search">
          <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" value={searchText}
          onChange={updateSearchText}/>
          <button className="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>
      </div>
    )
  }
  export default Navbar;

SearchView.js

import React from "react";
import Hero from "./Hero";

const SearchView =(keyword,searchResults)=>{
    const title =  `You are searching for ${keyword}`
    console.log(searchResults,"are the search results")
    return(
        <div>
            <Hero text ={title} />
        </div>
    )
}
export default SearchView;
 

Answer 1

Pass the props that SearchView should have through the component prop while calling the component.

<Route 
  path='/search' 
  component={
    <SearchView keyword={searchText} searchResults={searchResults} />
  } 
/>

And your output is [object Object] because you're logging the props object, not the keyword string. Add the destructuring assignment of the props to actually get the props that are being passed.

const SearchView = ({ keyword, searchResults }) => {
  const title = `You are searching for ${keyword}`;

  return (
    <div>
      <Hero text ={title} />
    </div>
  );
}