Develop Reference

Button not rendering in React.js

I am trying to render a Button in React.js that would pop up a modal which reads "Submit Comment". However, the page turns up blank when i add the CommentForm component inside the RenderComments function. It works fine when I add a HTML component like "p" but doesnt work for CommentForm and "Button". Please help. I'm new to React.
import React, {Component} from "react";
import { Link } from "react-router-dom";
import { Modal, ModalHeader, ModalBody } from "bootstrap-react";
import { Button } from 'react';
import { Card, CardImg, CardText, CardBody, CardTitle, Breadcrumb,
BreadcrumbItem } from "reactstrap";
class CommentForm extends Component {
constructor(props) {
super(props);
this.toggleModal = this.toggleModal.bind(this);
this.state = {
isModalOpen: false
};
}
toggleModal() {
this.setState({
isModalOpen: !this.state.isModalOpen
})
}
handleSubmitComment(values) {
}
render() {
return (
<div>
<Button outline onClick={this.toggleModal}>
<span className="fa fa-pen fa-lg">Submit Comment</span>
</Button>
<Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
<ModalHeader toggle={this.toggleModal}>Submit Comment</ModalHeader>
<ModalBody>
</ModalBody>
</Modal>
</div>
);
}
}
function RenderDish({dish}) {
if (dish != null) {
return (
<div className='col-12 col-md-5 m-1'>
<Card>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle> {dish.name}</CardTitle>
<CardText> {dish.description} </CardText>
</CardBody>
</Card>
</div>
);
}
else {
return (
<div></div>
);
}
}
function RenderComments({comments}){
if (comments != null)
return (
<div className='col-12 col-md-5 m-1'>
<h4> Comments </h4>
<ul className='list-unstyled'>
{comments.map(comment => {
return (
<li key={comment.id}>
<p>{comment.comment}</p>
<p>-- {comment.author},
{new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: '2-digit'
}).format(new Date(comment.date))}
</p>
</li>
);
})}
</ul>
<CommentForm />
</div>
);
else
return ( <div></div>);
}
const DishDetail = (props) => {
console.log('DishDetail Component render is invoked')
console.log(props.dish);
console.log(props.comments);
if (props.dish != null)
return (
<div className="container">
<div className='row'>
<Breadcrumb>
<BreadcrumbItem><Link to='/menu'>Menu</Link></BreadcrumbItem>
<BreadcrumbItem active>{props.dish.name}</BreadcrumbItem>
</Breadcrumb>
<div className="col-12">
<h3>{props.dish.name}</h3>
<hr />
</div>
</div>
<div className="row">
<RenderDish dish={props.dish} />
<RenderComments comments={props.comments} />
</div>
</div>
);
else
return(
<div></div>
);
}
export default DishDetail;

I do not believe that React exposes a Button component, which you seem to try to use in import { Button } from 'react';
Should that Button be coming from the reactstrap package as well ?

instead of this :
import { Button } from 'react';
You should use
import { Button } from 'react-bootstrap'
or
import { Button } from 'reactstrap' pick which library is your prefer.
Also I don't think bootstrap-react is true (also there is one but not used commonly). for this line of your code import { Modal, ModalHeader, ModalBody } from "bootstrap-react"; I belive it should be import { Modal, ModalHeader, ModalBody } from "reactstrap"; because all these u called(Modal, ModalHeader, ModalBody) perfectly match with reactstrap.

In addition to #FaizErturk's answer, in toggleModal the callback argument of setState should be used:
this.setState((state)=>({
isModalOpen: !state.isModalOpen
}));
This prevents stale state values from being used to update.
See https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

React switching between components or hiding and transitions

I am trying to set up the general page rendering of an app and need help/advice as a newbie. The code below allows me to include components base on a state I can change by clicking on a button. I am not sure if this is the best way to do this but when I click on my buttons they include the components needed.
Now when I click on them the other pages just disappear and show up without any transition. How would I fade out a little slower or transition better to the next component?
My app.js
import React, { useState } from "react";
//Adding Components
import Home from "./Components/Home";
import Game from "./Components/Game";
import Myp from "./Components/Myp";
import Tutorial from "./Components/Tutorial";
//Import Styles
import "./styles/app.scss";
function App() {
const [pageStatus, setPageStatus] = useState(0);
return (
<div className="App">
<section>
{(() => {
switch (pageStatus) {
case 1:
return (
<Game pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
case 2:
return (
<Tutorial
pageStatus={pageStatus}
setPageStatus={setPageStatus}
/>
);
case 3:
return (
<Myp pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
default:
return (
<Home pageStatus={pageStatus} setPageStatus={setPageStatus} />
);
}
})()}
</section>
</div>
);
}
export default App;
My Home.js
import React from "react";
//Import Images or Logos
import logo from "../icons/EduLogo.ico";
const Home = ({ setPageStatus, pageStatus }) => {
return (
<div className="home">
<div className="head">
<h1>EduMemory</h1>
<img alt="EduMemory logo" src={logo}></img>
</div>
<button onClick={() => setPageStatus(1)}>Play</button>
<button onClick={() => setPageStatus(2)}>How To Play</button>
<button onClick={() => setPageStatus(3)}>Tom's MYP</button>
</div>
);
};
export default Home;

You could try AOS library.
You just wrap the component in whatever and add what fade effect you want!
Here's how it looks: https://michalsnik.github.io/aos/
Github: https://github.com/michalsnik/aos

Recently I found this library which is live and works very well https://github.com/dennismorello/react-awesome-reveal
Also I made little sample for you hope it will work for you.
It's custom (No library).
Link for DEMO is here https://codesandbox.io/s/bold-gould-rjczp
Lets say you have this animation from 0 opacity to 100.
When you render component this class automatically will renew itself and animation will start from the beginning.
.fade-in {
animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
App.js
import React, { Component } from "react";
import "./styles.css";
import { Link, Route, Switch, BrowserRouter as Router } from "react-router-dom";
import Secondary from "./secondary";
class app extends Component {
render() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Router>
<Link to="/">Main</Link> | <Link to="/secondary">Secondary</Link>
<br />
<br />
<br />
<br />
<Switch>
<Route path="/" exact>
<div className="fade-in">
<div>Main</div>
</div>
</Route>
<Route path="/secondary">
<Secondary />
</Route>
</Switch>
</Router>
</div>
);
}
}
export default app;
Secondary.js
import React from "react";
export default function Secondary() {
return <div className="fade-in">Secondary</div>;
}
This is may be already dead library but if you want you can use react-reveal for transition effects. It's very easy to use, just wrap your content inside <Fade></Fade> tags
import React from "react";
//Import Images or Logos
import logo from "../icons/EduLogo.ico";
import Fade from 'react-reveal/Fade';
const Home = ({ setPageStatus, pageStatus }) => {
return (
<div className="home">
<Fade> //here goes react-reveal/fade
<div className="head">
<h1>EduMemory</h1>
<img alt="EduMemory logo" src={logo}></img>
</div>
<button onClick={() => setPageStatus(1)}>Play</button>
<button onClick={() => setPageStatus(2)}>How To Play</button>
<button onClick={() => setPageStatus(3)}>Tom's MYP</button>
</Fade>
</div>
);
};
export default Home;
Link here https://www.react-reveal.com/examples/common/Fade

React: Fade slideshow not working. How to fix it?

I am getting an error while trying to implement the Fade slideshow. The required image is:
The required codes are:
Home.js
import React, {Component} from 'react';
import Header from '../Header/Header';
import Slideshow from '../Slideshow/Slideshow';
class Home extends Component{
render(){
return(
<div>
<Header/>
<Slideshow/>
</div>
)
}
};
export default Home;
Slideshow.js
import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048',
'https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];
const Slideshow = () => {
return (
<Fade
images={images}
duration="5000"
transitionDuration="1000"/>
)
}
export default Slideshow;
Please tell me how to fix it.

You can pass your images as children to Fade component not props:
import React from 'react';
import { Fade } from 'react-slideshow-image';
const images = [
'https://media.gettyimages.com/photos/al-pacino-sits-in-a-chair-in-a-scene-from-the-film-the-godfather-part-picture-id159840433?s=2048x2048',
'https://media.gettyimages.com/photos/al-pacino-us-actor-sitting-in-an-armchair-in-a-publicity-still-issued-picture-id139630136?s=2048x2048'
];
const Slideshow = () => {
return (
<Fade>
// first child
<div className="each-fade">
<div className="image-container">
<img src={images[0]} />
</div>
<h2>First Slide</h2>
</div>
// second child
<div className="each-fade">
<div className="image-container">
<img src={images[1]} />
</div>
<h2>Second Slide</h2>
</div>
</Fade>
)
}
export default Slideshow;

A component is changing a controlled input. React

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

React way to open a NavBar onClick on a button

I trying to find a way to open the navbar of ReactJS app when i'm clicking on my "MENU" button.
At the beginning my nav component have a width of 0px (with overflow : hidden). When i'm clicking on the button my nav should have a width of 400px. I'm a beginner with React.
I have two React Components :
Topbar
export default function Topbar() {
return (
<div className="topbar__container">
<div className='topbar__menuButton'>
<Link className="topbar__link">MENU</Link>
</div>
<div className="topbar__title">
<Link to="/" className="topbar__link">EDGAR</Link>
</div>
</div>
)
}
Nav
const Nav = () => {
return (
<div className="navbar__container">
<Query query={CATEGORIES_QUERY} id={null}>
{({ data: { categories } }) => {
return (
<nav className="nav">
<ul>
{categories.map((category, i) => {
return (
<li key={category.id}>
<Link to={`/category/${category.id}`} className="nav__link">
{category.name}
</Link>
</li>
)
})}
</ul>
</nav>
)
}}
</Query>
</div>
)
}
export default Nav

To achieve something like that you have to set this logic in the common parent of both component (here App for the example).
App will manage a state to determine if the Nav is open or not. The state is called isMenuOpen and can be changed using the setIsMenuOpen() function. We will give to the children Nav the state isMenuOpen and to the children TopBar a callback from the function setIsMenuOpen():
App.jsx
import React from "react";
import TopBar from "./TopBar";
import Nav from "./Nav";
export default function App() {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);
return (
<div className="App">
<TopBar setMenuStatus={setIsMenuOpen} />
<Nav isOpen={isMenuOpen} />
</div>
);
}
Then the TopBar have to set the value of isMenuOpen to true using the function setIsMenuOpen() from the props.
TopBar.jsx
import React from "react";
export default function Topbar({ setMenuStatus }) {
return (
<div className="topbar__container">
<div className="topbar__menuButton">
<button
type="button"
onClick={() => {
setMenuStatus(true);
}}
>
Menu
</button>
</div>
</div>
);
}
Then the component Nav will set a specific class (here .open) if isOpen coming from props is true.
Nav.jsx
import React from "react";
import "./styles.css";
export default function Nav({ isOpen }) {
return (
<div id="nav" className={isOpen ? "open" : ""}>
Menu
</div>
);
}
styles.css
#nav {
display: none;
}
#nav.open {
height: 400px;
display: inline-block;
}
You can try this example in this codesandbox.

import React, {useState} from "react";
import "./styles.css";
export default function App() {
const [toggle, setToggle]= React.useState(false)
const [width, setWidth]= React.useState('')
const showMenu = () => {
setToggle(!toggle)
if(toggle === true) {
setWidth('50px')
}else {
setWidth('500px')
}
}
return (
<div className="App">
<button onClick={showMenu}>Menu</button>
<div style={{width, border:'1px solid red'}}>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</div>
</div>
);
}
reproducing link: https://codesandbox.io/s/billowing-flower-rxdk3?file=/src/App.js:0-592