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;
Pass the props that SearchView should have through the element prop while calling the component.
<Route
path='/search'
element={
<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>
);
}
Related
React router v6.7 does add /about to the end of the url but doesn't render the components. Normally putting the url does work though.
Navbar.js:
import React from 'react'
import PropTypes from 'prop-types'
import { Link, BrowserRouter } from 'react-router-dom'
export default function Navbar(props) {
return (
<BrowserRouter>
<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
<div className="container-fluid">
<Link className="navbar-brand" to="/">{props.title}</Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<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">{props.aboutText}</Link>
</li>
<li className="nav-item dropdown">
<Link className="nav-link dropdown-toggle" to="/" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</Link>
<ul className="dropdown-menu" aria-labelledby="navbarDropdown">
<li><Link className="dropdown-item" to="/">Action</Link></li>
<li><Link className="dropdown-item" to="/">Another action</Link></li>
<li><hr className="dropdown-divider" /></li>
<li><Link className="dropdown-item" to="/">Something else here</Link></li>
</ul>
</li>
<li className="nav-item">
<Link to="/" className="nav-link disabled">Disabled</Link>
</li>
</ul>
<div className="form-check form-switch mx-3">
<input className="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" onClick={props.toggleDarkMode} />
<label className="form-check-label" htmlFor="flexSwitchCheckDefault">Dark Mode</label>
</div>
<form className="d-flex">
<input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</BrowserRouter>
)
}
Navbar.propTypes = {
title: PropTypes.string.isRequired,
aboutText: PropTypes.string
}
Navbar.defaultProps = {
title: "Enter your Title",
aboutText: "About"
}
App.js
// import logo from './logo.svg';
import { useState } from 'react';
import './App.css';
import About from './components/About';
import Navbar from './components/Navbar';
import TextForm from './components/TextForm';
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <TextForm />,
},
{
path: "/about",
element: <About />
}
]);
function App() {
const [mode, setMode] = useState("light");
const toggleDarkMode = (event) => {
if (event.target.checked) {
setMode("dark");
document.body.style.backgroundColor = "#15181a";
document.body.style.color = "white";
}
else {
setMode("light");
document.body.style.backgroundColor = "white";
document.body.style.color = "black";
}
}
return (
<>
<Navbar title="TextUtils" aboutText="About Us" mode={mode} toggleDarkMode={toggleDarkMode} />
<RouterProvider router={router} />
</>
);
}
export default App;
Expectation:
Link to should render the component into the DOM without reloading.
Reality:
The url gets concatenated but the page actually doesn't render anything.
Your <RouterProvider /> needs to wrap the NavBar component with router prop. Check out the official documentation.
What you're currently doing is wrapping the Navbar but you have provided no router instance. So it doesn't know the routes and which component to render when routes change.
Refactor App.js like this:
<>
<RouterProvider router={router}>
<Navbar title="TextUtils" aboutText="About Us" mode={mode} toggleDarkMode={toggleDarkMode} />
</RouterProvider>
</>
And remove RouterProvider parent component from Navbar
Ok, So the thing is React Router v6.7 docs for getting started does not mention that the elements inside the:
const router = createBrowserRouter(createRoutesFromElements(
<Route path='/' element={<RootLayout />}>
<Route index element={<TextForm />} />
<Route path='/about' element={<About />} />
</Route>
))
Would be rendered wherever the <Outlet /> tag is.
So I made RootLayout page and put it inside that and everything works. Here is what it looks like.
import React from 'react'
import { Outlet } from 'react-router-dom'
import Navbar from '../components/Navbar'
import { useState } from 'react'
export default function RootLayout() {
const [mode, setMode] = useState("light");
const toggleDarkMode = (event) => {
if (event.target.checked) {
setMode("dark");
document.body.style.backgroundColor = "#15181a";
document.body.style.color = "white";
}
else {
setMode("light");
document.body.style.backgroundColor = "white";
document.body.style.color = "black";
}
}
return (
<>
<Navbar title="TextUtils" aboutText="About Us" mode={mode} toggleDarkMode={toggleDarkMode} />
<Outlet />
</>
)
}
Whenever i clicked on button url is change but content doesn't change and one more thing if i use <a> tag in exchange of <Link> tag then obviously page loading but content also load and update
but using <Link> tag it is not load data but url value is update so, please give me a solution for this
App.js
import "./App.css";
import "../node_modules/bootstrap/dist/css/bootstrap.css";
import Home from "./component/pages/Home";
import Contect from "./component/pages/Contect";
import About from "./component/pages/About";
import Navbar from "./component/layout/Navbar";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React from "react";
function App() {
return (
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/Contect" component={Contect}></Route>
<Route exact path="/" component={Home}></Route>
<Route exact path="/About" component={About}></Route>
</Switch>
</Router>
);
}
export default App;
Navbar.js
import React from "react";
import { Link } from "react-router-dom";
import {} from "react-router-dom";
const Navbar = (props) => {
return (
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<div className="container">
<Link class="navbar-brand bg-light" to="/contect">
{props.title}
</Link>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<Link class="nav-link bg-light" to="/">
Home
</Link>
</li>
<li class="nav-item active">
<Link class="nav-link bg-light" to="/About">
About
</Link>
</li>
</ul>
</div>
</div>
</nav>
);
};
export default Navbar;
Home.js
import React from "react";
const Home = () => {
return (
<>
<div className="container">
<div className="py-4">
<h1> Home page </h1>
</div>
</div>
</>
);
};
export default Home;
About.js and Contect.js is same as Home.js
<Router>
<Navbar title="title1" />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/Contect" component={Contect}/>
<Route path="/About" component={About}/>
</Switch>
</Router>
I'm trying to make a navbar using react , but although the link has changed , the content never being changed !
routes in my App.js :
import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';
const App = () => (
<Router>
<Layout>
<Routes>
<Route exact path = '/' component = {Home} />
<Route exact path = '/blog' component = {Blog} />
<Route exact path = '/category/:id' component = {Category} />
<Route exact path = '/blog/:id' component = {BlogDetail} />
</Routes>
</Layout>
</Router>
);
export default App ;
Home.js file , the content "Home" doesn't appear , although the link changed:
import React from "react";
const Home = () => (
<>
<div>
Home
</div>
</>
);
export default Home;
Also the content of Blog.js file doesn't appear "same as Homel.js":
import React from "react";
const Blog = () => (
<div>
blog
</div>
);
code of navbar Navbar.js using bootstrap :
import React from "react";
import {Link, NavLink} from 'react-router-dom';
const Navbar = () => (
<div>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<Link className="navbar-brand" to="/">Around the world </Link>
<button className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" exact to = '/'>home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" exact to = '/blog'>Blog</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
);
export default Navbar;
Layout.js:
import React from "react";
import Navbar from '../components/Navbar';
const Layout = (props) => (
<div>
<Navbar />
{props.children}
</div>
);
export default Layout;
Nothing is rendered because you are not correctly using the Route component's element prop to render the routed components. In react-router-dom#6 gone are the component and render and children render function props, replaced by a single element prop taking a ReactElement, a.k.a. JSX.
Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactElement | null; // <-- routed component
index?: boolean;
path?: string;
}
const App = () => (
<Router>
<Layout>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/blog' element={<Blog />} />
<Route path='/category/:id' element={<Category />} />
<Route path='/blog/:id' element={<BlogDetail />} />
</Routes>
</Layout>
</Router>
);
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
Hello i have done everything but i dnt know why still its not working. am using react and router latest version.Stil am not able to opening my contact page.I have tried everything to solve it but still am not able to do it?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import New from './components/Navbar';
import Home from './components/Home';
import About from './components/About';
import Services from './components/Services';
import Name from './components/pages/Name';
import { BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const App = () => {
return(
<>
<Router>
<New/>
<Switch>
<Route Path='/' exact component = {Home} />
<Route Path='/About' exact component = {About} />
<Route Path='/Services' exact component = {Services}/>
<Route Path='/Name' exact component = {Name}/>
<Route Path='/Home' exact component = {Home}/>
</Switch>
</Router>
</>
)
}
export default App;
Conatct.jsx
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactDOM from 'react-dom';
function Contact () {
return (
<>
<h1>contact</h1>
</>
)
}
export default Contact;
Pages / Name.js (i have import Contact here)
import React from 'react';
import Contact from '../Contact'
export default function Name() {
return (
<>
<Contact />
</>
);
}
Navbar.js
import React from 'react';
import './Navbar.css'
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import { Button,Container,Navbar,Nav,NavDropdown,NavLink } from 'react-bootstrap';
import {
BrowserRouter as Router, Switch,Route,Link,Routes,Redirect} from "react-router-dom";
const New = () => {
return (
<div>
<div className="container-fluid">
<div className="row">
<div className='col-10 mx-auto'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<NavLink className="navbar-brand" to="/">Navbar</NavLink>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ms-auto mb-auto mb-lg-2">
<li className="nav-item">
<NavLink className="nav-link active" aria-current="page" to="/">Home</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Services">Services</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/About">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/Contact">Contact</NavLink>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
);
};
export default New;
First thing, using lowercase only in routes because browser concerto to lowercase
Second thing you need create a link component for react-router, NavLink is only UI element, not a valid like for rect router
should using this
https://reactrouter.com/web/api/Link
I want to hide app component content when I click on other component pages link.
Right now, when I click other links like about us, then it shows both app component and about us page component. But I want show only about us content once I click on about us page.
Also, when I define App component patch as a "/" then application keeps loading.
Below are the code
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import data from "./data";
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
<Navigation />
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img
src={require("./images/" + link.Img)}
className="card-img"
alt=""
/>
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default App;
Navigation.Js Everything is working fine only App home page content show which i don't want when i click other pages
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class Navigation extends Component {
render() {
return (
<Router>
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
<Switch>
<Route exact path="/Api" component={Api}></Route>
<Route exact path="/News" component={News}></Route>
<Route exact path="/Website" component={Website}></Route>
</Switch>
</Router>
);
}
}
export default Navigation;
For this to work you need to put content of app.js inside another component because right now it doesnt have a route to hide itself when going to other page. So you need to treat the component just like your rest components (Api.js, News.js) etc..
NewAppComponent.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
class Navigation extends Component {
render() {
return (
<ul className="nav justify-content-center mb-4 navigation">
<li className="nav-item">
<Link className="nav-link" to="/Api">
Api
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/News">
News
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/Website">
Website
</Link>
</li>
</ul>
);
}
}
export default Navigation;
App.js
import React, { Component } from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import NewAppComponent from "./NewAppComponent";
import Api from "./Api";
import News from "./News";
import Website from "./Website";
class App extends Component {
render() {
return (
<div className="container">
<Router>
<Navigation />
<Switch>
<Route exact path="/" component={NewAppComponent}></Route>
<Route path="/Api" component={Api}></Route>
<Route path="/News" component={News}></Route>
<Route path="/Website" component={Website}></Route>
</Switch>
</Router>
</div>
);
}
}
export default App;
NewAppComponent.js
// NewAppComponent.js
import React, { Component } from "react";
import data from "./data";
class NewAppComponent extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
// data: false
};
}
render() {
return (
<div className="container">
{data.map((link) => (
<div className="card mb-3" key={link.Title}>
<div className="row no-gutters">
<div className="col-md-5">
<img src={require("./images/" + link.Img)} className="card-img" alt="" />
</div>
<div className="col-md-7">
<div className="card-body">
<h5 className="card-title">{link.Title}</h5>
<p className="card-text">{link.Desc.halfDesc}</p>
<p className="card-text">
<small className="text-muted">{link.date}</small>
</p>
<button type="button" className="btn btn-dark float-right">
Read More
</button>
</div>
</div>
</div>
<FullDescription />
</div>
))}
</div>
);
}
}
const FullDescription = (props) => (
<div className="modalbox">
<p>fsdf</p>
</div>
);
export default NewAppComponent;