export partial component in React functional component - reactjs

In the below code I don't want to export Carousel and I just want to import everything except Carousel in other component.
import React from "react";
function Navbar() {
};
return (
<div className="navlabar">
<div className="brand_name_logo">
<Link to="/">
<img src={brand_name} alt="brand_logo" />
</Link>
</div>
<div className="dropdown">
<div>
<div id="explore__dropdown" className=" hide__ani hide__content">
<div className="explore__all__project">
<img src={exploreallproject}></img>
</div>
<div className="explore__top__10__find">
<img src={top10find}></img>
</div>
</div>
<Carousel climber1="CLMBR" />
</div>
);
}
export default Navbar;

Related

React Carousel and onClick events

I'm making a small imdb clone in reactJS and I just managed to add a carousel to the component that renders out movies. The problem is that the clickevent for each movie doesn't work anymore. What's the simplest way to solve this without rewriting the entire component?
I could add a onclick event to the carousel but then i have to return all the neccessary data from the movie component and later send it to moviePage which seems redundant
Home.js
import { React } from "react";
import SearchBox from "./components/SearchBox";
import Movie from "./components/Movie";
import { Carousel } from "react-responsive-carousel";
function Home(props) {
return (
<div className="App">
<div className="row d-flex align-items-center mt-4 mb-4">
<SearchBox
searchValue={props.searchValue}
setSearchValue={props.setSearchValue}
/>
</div>
<h1>Movies</h1>
<div className="block">
<Carousel onClickItem={console.log("you pressed")}>
{props.data.map((movie, index) => {
return (
<Movie
key={movie.id}
movie={movie}
placeMovie={props.placeMovie}
index={index}
/>
);
})}
</Carousel>
</div>
<h1>Recently viewed</h1>
<div className="inline-view">
{props.latestView.map((n) => {
return (
<img
key={n.id}
src={"https://image.tmdb.org/t/p/w500" + n.backdrop_path}
alt={n.poster_path}
/>
);
})}
</div>
</div>
);
}
export default Home;
Movie.js
import React from "react";
import { NavLink } from "react-router-dom";
export default function Movie(props) {
const handleClick = () => {
props.placeMovie(props.index);
};
return (
<div className="image-container d-flex justify-content-start m-3">
<div>
<NavLink onClick={handleClick} to={`/MoviePage`}>
<img
className="image-list"
src={"https://image.tmdb.org/t/p/w500" + props.movie.backdrop_path}
alt={props.movie.path}
/>
</NavLink>
<h4 class="font-weight-bold">{props.movie.title}</h4>
<h5 class="font-weight-light">Score:{props.movie.vote_average}</h5>
</div>
</div>
);
}
Heres the moviepage that displays more info when you click on a movie item
import React from "react";
function MoviePage(props) {
return (
<div>
<div className="card-single">
<div>
<img
className="image-single"
src={"https://image.tmdb.org/t/p/w500" + props.movie.backdrop_path}
alt={props.movie.path}
/>
<div class="card-title">
<h1 class="font-weight-bold">{props.movie.title}</h1>
</div>
<h3 class="card-text">{props.movie.overview}</h3>
<h5 class="font-weight-light">
Language: {props.movie.original_language}
</h5>
<h5 class="font-weight-light">
Release date: {props.movie.release_date}
</h5>
</div>
</div>
</div>
);
}
export default MoviePage;

Local image not loading when using props in reactjs

I'm following a tutorial and I'm learning about props right now. I'm trying to use props to for my images' url's but they are not loading.
This is the code for my App.js:
import './App.css';
import Nav from './Components/Nav/Nav';
// import Main from './Components/Main/Main';
import Card from './Components/Card/Card';
function App() {
return (
<div className="App">
<Nav />
{/* <Main /> */}
<Card
img="image 12.png"
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
</div>
);
}
export default App;
And this is the code for my Card.js:
import React from "react";
import './Card.css'
import star from '../../images/Star 1.png'
export default function Card({
img, rating, reviewCount, country, title, price}) {
return (
<div className="bottom">
<img className="image" src={`../../images/${img}`} />
{/* <p className="availability">SOLD OUT</p> */}
<div className="stats">
<img className="star" src={star}></img>
<span>{rating}</span>
<span className="gray"> {reviewCount} • </span>
<span className="gray">{country}</span>
</div>
<p className="text1">{title}</p>
<p className="text2"><span className="bold">
From ${price}</span> / person
</p>
</div>
)
}
What should I do so that my pictures load?
First you need to import the local image instead of the url (the same way you did with star in Card.js)
import Nav from './Components/Nav/Nav';
import Card from './Components/Card/Card';
import image from "../../images/image 12.png" //this
function App() {
return (
<div className="App">
<Nav />
{/* <Main /> */}
<Card
img={image}
rating="5.0"
reviewCount={6}
country="USA"
title="Life Lessons with Katie Zaferes"
price={136}
/>
</div>
);
}
export default App;
and then you just pass the prop to the "src" of image
export default function Card({
img, rating, reviewCount, country, title, price}) {
return (
<div className="bottom">
<img className="image" src={img} />
{/* <p className="availability">SOLD OUT</p> */}
<div className="stats">
<img className="star" src={star}></img>
<span>{rating}</span>
<span className="gray"> {reviewCount} • </span>
<span className="gray">{country}</span>
</div>
<p className="text1">{title}</p>
<p className="text2"><span className="bold">
From ${price}</span> / person
</p>
</div>
)
}
this is because when using webpack you need to require the images so that webpack can load them.
alternatively, if you want the images to be loaded dynamically depending on a string you could leave the code as before and just replace the image src with an import
<img className="image" src={require (`../../images/${img}`)} />
or
<img className="image" src={require (`../../images/${img}`).default} />
I hope you have a nice day and it works for you :)

React Page Refresh the Whole Page after Clicking on a link

I've just started using reactJS and i am integrating an HTML admin template in react which has header, sidebar, footer and the main section content.
One thing i'm a bit curious is whenever i click links in the main section content, only the specific section dynamically loads, but when i click on links in sidebar the entire page reloads, why is it so? Below is the code that i'm following
App.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Header from './Components/Header';
import Content from './Components/Content';
import Footer from './Components/Footer';
import Sidebar from './Components/Sidebar';
const App = () => {
return(
<BrowserRouter>
<Header/>
<Sidebar/>
<Content/>
<Footer/>
</BrowserRouter>
);
}
export default App;
Header.jsx
import React from 'react';
import logo from '../stack.png';
const Header = () => {
return(
<nav>
</nav>
);
}
export default Header;
Sidebar.jsx
import React from 'react';
import { Link } from 'react-router-dom';
const Sidebar = () => {
return(
<aside>
<div className="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
<div className="main-menu-content">
<ul className="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
<li style={{'margin': '25px 0 0 0'}} className="active nav-item">
<Link to="/dashboard">
<i className="ft-home"></i>
<span className="menu-title">
Dashboard
</span>
</Link>
</li>
<li className="nav-item"></i><span className="menu-title" data-i18n="">Create</span>
<ul className="menu-content">
<li className=" menu-item">
<Link to="/create">
<span className="menu-title">
Create New
</span>
</Link>
</li>
<li className=" menu-item">
<Link to="/createxyz">
<span className="menu-title">
Create XYZ
</span>
</Link>
</li>
</ul>
</li>
</ul>
</div>
</div>
</aside>
);
}
export default Sidebar;
Content.jsx
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Enter from './Enter';
import Enterxyz from './Enterxyz';
const Content = () => {
return(
<Switch>
<Route exact path="/" component={Dashboard} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/create" component={Enter} />
<Route path="/createxyz" component={Enterxyz} />
</Switch>
);
}
export default Content;
Footer.jsx
import React from 'react';
function Footer()
{
return(
<footer className="footer footer-static footer-light navbar-border">
<p className="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
<span className="float-md-left d-block d-md-inline-block">© 2020
<a className="text-bold-800 grey darken-2" href="">
xyz
</a> (All Rights Reserved)
</span>
</p>
</footer>
);
}
export default Footer;
Code snippet in import Enter from './Enter';
import React from 'react';
import { Link } from 'react-router-dom';
const Enter = () => {
return(
<div className="app-content content">
<div className="content-wrapper">
<div className="content-body">
<div className="row">
<div className="col-md-12">
<div className="card" style={{'height': 'auto'}}>
<div className="card-header">
<h4 className="card-title" id="basic-layout-form">Create New Client</h4>
<a className="heading-elements-toggle"><i className="fa fa-ellipsis-v font-medium-3"></i></a>
<div className="heading-elements">
<ul className="list-inline mb-0">
<li><Link to="/dashboard">Dashboard</Link></li>
<li><i className="ft-chevrons-right"></i></li>
<li><a>Create</a></li>
<li><i className="ft-chevrons-right"></i></li>
<li><Link to="/create">Enter New</Link></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Enter;
in the Enter code snippet there are 2 links(Breadcrumbs) when i click on them the page loads dynamically without refresh.
But when i click on the links in sidebar, the entire page reloads to display the content, why is it so? What is wrong?

How to get another component when I click h1 tag in react using hooks?

I am working on react project in that project Home.js is Parent component and Test.js is Child component. In Home.js component I have tag here what I am trying to do is If I Click tag I need to call Test.js component. For this In Home.js I created one function and, To that function I passed Test.js component. and I passed that function via onClick method to h1 tag but its not working. How to achieve this.
This is App.js
import React from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Navbar from './Components/Navbar/Navbar';
import Home from "./Pages/Home/Home";
import Test from "./Pages/Test/Test";
function App() {
return (
<div className="App">
<Router>
<Navbar></Navbar>
<Switch>
<Route exact path='/'><Home></Home></Route>
<Route path='/test'><Test></Test></Route>
</Switch>
</Router>
</div>
);
}
export default App;
This is Navbar.js
import React from 'react';
import './Navbar.css';
import { Link } from 'react-router-dom';
export default function Navbar() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
<Link className='nav-link' to='/'>Home</Link>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
)
}
This is Home.js
import React from 'react';
import './Home.css';
import { Link } from 'react-router-dom';
import Test from '../Test/Test';
export default function Home() {
const Test = () => {
<Test></Test>
}
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div>
<h1 onClick={Test}>Cruse</h1>
</div>
</div>
</div>
</div>
)
}
This is Test.js
import React from 'react'
export default function Test() {
return (
<div>
<h1>Test works</h1>
</div>
)
}
I would say you are using event handlers wrong. Their purpose is to produce some kind of side effects, and they don't return a direct result. If you wish to show new element on click i recommend using react state and something like this:
export default function Home() {
const [isTestVisible, setTestVisible] = useState(false);
const showTest= () => setTestVisible(true);
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div>
<h1 onClick={showTest}>Cruse</h1>
{isTestVisible && <Test />}
</div>
</div>
</div>
</div>
)
}
In your state you could save different props for each test component so you can customize them. Hope this helps :)
Using states is the correct answer as #Kaca992 said. But for what you do, you can do something like this:
const Test = () => {
ReactDOM.render(<Test/>, document.getElementsByTagName("h1")[0]);
}

How to change styles for components while we reusing in react?

I am working on react project, In that I have a parent component that is App.js. for that that App.js, Child.js is child component. In that Child.js I put one icon and apply styles.
Now I want to reuse that Child.js component with a different background color, different icon, different border color.
How to achieve this is in react
This is App.js
import React from 'react';
import './App.css';
import Child from './Child/Child'
function App() {
return (
<div className="App">
<Child></Child>
<Child></Child>
</div>
);
}
export default App;
This is Child.js
import React from 'react';
import './Child.css';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons';
function Child() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className='coffee' icon={faCoffee} />
</div>
</div>
</div>
</div>
)
}
export default Child
This is Child.css
.exp{
width:80px;
height:80px;
background-color:red;
border-radius:100%;
line-height:80px;
text-align:center;
vertical-align:middle;
display:inline-block;
border: solid 3px blue;
}
.coffee {
color: green;
}
You can create multiple classes in your css file and then pass in the prop of the class name and icon you want to use in the component.
<Child iconClass="coffee" icon={faCoffee}/>
function Child(props) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className={props.iconClass} icon={props.icon} />
</div>
</div>
</div>
</div>
)
}
You can add an icon props to render a JSX element in your Child component.
function Child({ icon }) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
{icon}
</div>
</div>
</div>
</div>
)
}
You can then write your Children component like this in your Parent component.
<Child icon={(<FontAwesomeIcon className='coffee' icon={faCoffee} />)} />
Make the child to accept props and pass props when you render the component.
function Child({ icon, className}) {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<div class="exp">
<FontAwesomeIcon className={className} icon={icon} />
</div>
</div>
</div>
</div>
)
}
export default Child
Then use it like
<Child icon="faCoffee" className="style" />
<Child icon="faBars" className="style" />

Resources