I have created a react component but got stuck with an error.
I am posting code as well, any help appreciated.
I am trying to show this on a Input box and take input from it to search based on text...............nmnmnmnmbnbnvbnvnbvnbvnbnvnbvbnvbnvbvbnvbvbnvnbvbnvbn.....
thanks!
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './Component/Header';
import Recipe from './Component/Recipe';
import Value from './Component/Form';
import Form from './Component/Form';
function App() {
const [Search, setSearch] = React.useState("");
const onInputChange = (event) => {
setSearch(event.target.Value)
}
return (
<div className="container">
<Header Search={Search} onInputChange={onInputChange} />
<Value />
<Form />
<Recipe />
</div>
);
}
export default App;
import React from 'react';
import { Button, input } from 'reactstrap';
import './Header.css';
const Header = props => {
return (
<div className= "jumbotron">
<h1 className= "brand-icons"><span class="material-icons">
fastfood </span> Food Recipe </h1>
<div>
<input type="text"
placeholder="Search Recipe"
value={props.Search}
onChange={props.onInputChange} />
<Button className="icon">Search</Button>
</div>
</div>
);
}
export default Header;
setSearch(event.target.Value) should be setSearch(event.target.value)
Minor: `Search` variable should be in camelCase
Related
**I learnt React router version 5 but I do not understand how version 6.4.3 works
App.js
import React from 'react';
import './App.css';
import Header from './Header';
function App() {
return (
<div className="app">
<Header/>
</div>
);
}
export default App;
Header.js
import React, {useState} from 'react'
import './Header.css';
import MenuIcon from '#mui/icons-material/Menu';
import SearchIcon from '#mui/icons-material/Search';
import VideoCallIcon from '#mui/icons-material/VideoCall';
import AppsIcon from '#mui/icons-material/Apps';
import NotificationAddIcon from '#mui/icons-material/NotificationAdd';
import { Avatar } from '#mui/material';
import { Link } from "react-router-dom";
function Header() {
const [inputSearch, setInputSearch] = useState('');
return (
<div className='header'>
<div className='header_left'>
<MenuIcon />
<Link to='/'>
<img
className='header_logo'
src='https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg'
alt='' />
</Link>
</div>
<div className='header_input'>
<input onChange={(e) => setInputSearch(e.target.value)}
value={inputSearch}
type='text' placeholder='Search'/>
<Link to={`/search/${inputSearch}`}>
<SearchIcon className='header_inputbutton' />
type here
</Link>
</div>
<div className='header_icons'>
<VideoCallIcon className='header_icon' />
<AppsIcon className='header_icon'/>
<NotificationAddIcon className='header_icon'/>
<Avatar src='' alt='Igbe Ajaga'/>
</div>
</div>
)
}
export default Header
I tried to use react router but the Header component which has react router imported is displaying a blank white space on my browser while the other components without react router are displaying correctly.**
import React, {Component} from 'react';
import './App.css';
import Navbar from './components/Navbar/Navbar.js';
import Merch from './components/Merch/Merch.js';
import Footer from './components/Footer/Footer.js';
class App extends Component {
render() {
return (
<div >
<Navbar />
<Merch />
<Footer />
</div>
);
}
}
export default App;
I created one component and I'm exporting it
import React , {Component} from 'react'
import logo from './logo.svg';
class Item extends Component {
render () {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">ReactND - Coding Practice</h1>
</header>
<h2>Shopping List</h2>
<form onSubmit={this.addItem}>
<input
type="text"
placeholder="Enter New Item"
value={this.state.value}
onChange={this.handleChange}
/>
<button disabled={this.inputIsEmpty()}>Add</button>
</form>
<button onClick={this.deleteLastItem} disabled={this.noItemsFound()}>
Delete Last Item
</button>
</div>
)
}
}
export default Item
And I want to use this component in my app component as below
import React from 'react';
import './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
But I got this error in App.js
Line 9: 'Item' is not defined react/jsx-no-undef
pretty sure I did everything. I have exported and imported this component , so what I'm missing here?
You have to name your import.
import React from 'react';
import Item from './Item';
class App extends React.Component {
render() {
return (
<div>
<Item />
</div>
);
}
}
export default App;
Hi I am very new to react and coding so please baby me in your explanations.
I have created a component in react named Header1. I have used dynamic text using props so I can change the wording for each time I use the Header1 component. I am wondering how do I do that for the style. I would like one card to have pink text and another to have blue text. Please help! And thank you in advance :)
The following is the creation of the Header1 component:
import React from 'react';
import WhiteMap from '../img/other/whiteWorld.png';
import HeaderScss from './_Header1.scss'
const header1 = (props, style)=>{
return <div className="main--container">
<header className="header--container__inside">
<section className="header--container__left">
<h1>
{props.headerTitle}
{style.headerTitleS}
</h1>
<p>
{props.headerDescription}
</p>
</section>
<section className="header--container__right">
<div className="header--pic">
<img src={WhiteMap} alt="World map with a circle highlighting Australia"/>
</div>
</section>
</header>
</div>
};
export default header1;
The following is the main App.js file where I am using the Header1 component twice:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Navigation1 from './Navigation/Navigation1';
import Header1 from './Header/Header1';
import SaveMoney1 from './SaveMoney/SaveMoney1';
import Airports1 from './Airports/Airports1';
// import SydneyCards1 from './SydneyCards/SydneyCards1';
import ThingsYouShouldKnow1 from './ThingsYouShouldKnow/ThingsYouShouldKnow1';
// import BucketList1 from './BucketlistCards/BucketlistCards1';
// import Footer1 from './Footer/Footer1';
import styles from './appStyles.module.css';
class App extends Component {
render() {
return (
<div className="App">
<Navigation1 />
<Header1 headerTitle="Fly to" headerDescription=" Selia."/>
<SaveMoney1/>
<Airports1/>
<Header1 headerTitle="Things you should know" headerDescription ="Based on customer bookings,
{/* <BucketList1/> */}
{/* <SydneyCards1/> */}
{/* <Footer1/> */}
</div>
);
}
}
export default App;
One of the ways would be using styles, like you're trying to do in your example. Try to do something like this
const Header = (props) => {
return <h1 style={props.style}>{props.title}</h1>
}
And you would render it like this
const App = () => {
return (
<div>
<Header title="My Header with Blue text" style={{color: "blue"}} />
<Header title="My Header with Red text" style={{color: "red"}} />
</div>
)
}
Note: You can do the same passing a CSS class as a prop instead of the exact style object.
In my main container the layout has this code
import React, { Component } from 'react';
import Header from '../../components/Navigation/Header/Header';
import SideBar from '../../components/Navigation/SideBar/SideBar';
class Layout extends Component {
state = {
showSideBar: true
}
sideBarToggleHandler = () => {
console.log("test");
}
render() {
return (
<div>
<Header />
<div>
<SideBar onClick={this.sideBarToggleHandler}/>
<main id="main">
{this.props.children}
</main>
</div>
</div>
)
}
}
export default Layout;
Whenever I click on any element in the side bar I want to console log test
For some reason this is not happening however if I move the onClick method to the header for example or to main it works fine
This is my sidebar:
import React from 'react';
import classes from './SideBar.module.scss';
import Logo from '../Logo/Logo'
import NavigationItems from './NavigationItems/NavigationItems'
const sideBar = (props) => {
}
return (
<div className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
};
export default sideBar;
and this is my navigation items:
import React from 'react';
import classes from './NavigationItems.module.scss';
import Aux from '../../../../hoc/Aux';
import CollapseIcon from '../../../../assets/Images/Icons/collapse.svg'
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faHome } from '#fortawesome/free-solid-svg-icons';
import { faFileAlt } from '#fortawesome/free-solid-svg-icons';
import { faChartLine } from '#fortawesome/free-solid-svg-icons';
library.add(faHome);
library.add(faFileAlt);
library.add(faChartLine);
const navigationItems = (props) => {
return (
<Aux>
<p>CONSUMER</p>
<ul className={classes.NavigationItems}>
<li><FontAwesomeIcon className={classes.Icon1Paddig} icon="home" /> Home</li>
<li><FontAwesomeIcon className={classes.Icon2Paddig} icon="file-alt" /> Dashboard</li>
<li><FontAwesomeIcon className={classes.Icon3Paddig} icon="chart-line" /> Statistics</li>
</ul>
<div className={classes.Divider}></div>
<div className={classes.ButtonPosition}>
<button onClick={props.clicked}><img className={classes.CollapseIcon} src={CollapseIcon} alt='icon'></img>Collapse sidebar</button>
</div>
<div className={classes.Divider + ' ' + classes.DividerBottom}></div>
<p className={classes.footer}>Micheal Alfa v 1.0.0</p>
<p className={classes.footer}>Copyrights # 2019 All Rights Reserved</p>
</Aux>
);
};
export default navigationItems;
Any ideas?
Thank you
You are not doing anything with the passed onClick event. You need to put it on something, like so:
const sideBar = (props) => (
<div onClick={this.props.onClick} className={Classes.SideBar}>
<Logo />
<nav>
<NavigationItems />
</nav>
</div>
);
export default sideBar;
This will fire that event when you click on the div. Make sense?