I am trying to show a custom PopUp component on the screen when a user clicks on the Info icon but nothing is rendering in the UI when clicked.
I'm not exactly certain where I'm going wrong if anyone could provide some guidance?
Here is my Card component with PopUp inside the return:
import React, { useState } from 'react';
import { Card } from 'react-bootstrap';
import InfoIcon from '#material-ui/icons/Info';
import PopUp from './PopUp';
const WelcomeCard = (props) => {
const [show, setShow] = useState(false);
const togglePop = () => {
setShow(true);
};
return (
<Card className='m-3 p-2 welcome-card rounded'>
<Card.Body>
<Card.Text className='mt-4'>{props.text}</Card.Text>
<Card.Title>{props.title}</Card.Title>
<button>{props.button}</button>
{show && <PopUp toggle={togglePop} />}
<InfoIcon className='info-icon' onClick={togglePop} />
</Card.Body>
</Card>
);
};
export default WelcomeCard;
And my actual PopUp component itself:
import React from 'react';
const PopUp = (props) => {
const handleClick = () => {
props.toggle();
};
return (
<div className='modal'>
<div className='modal_content'>
<span className='close' onClick={handleClick}>
×
</span>
<form>
<h3>Register!</h3>
<label>
Name:
<input type='text' name='name' />
</label>
<br />
<input type='submit' />
</form>
</div>
</div>
);
};
export default PopUp;
Would really appreciate some help on this one to understand it better, thanks in advance!
Related
I am new in REACT JS so while making an app I am stuck at this part where i want to change h1 value when the button is clicked
import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
function App() {
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>this text should change</h1>
<Button className=" btn btn1" color="light">YES</Button> // this button should change the text
<Button className=" btn btn2" color="light">NO</Button>
</div>
</Row>
</Container>
);
}
export default App;
Never access the real DOM. Use states and render it the React way.
I would generally use a state to change something - refer Using the State Hook. And then render it out. Create this:
const [Text, setText] = useState("this text should change");
Render it:
<h1>{Text}</h1>
Use the event handler and use a type="button" so that it doesn't refresh the page:
<Button
className=" btn btn1"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on YES button!");
}}
>
YES
</Button>
{/*// this button should change the text*/}
<Button
className=" btn btn2"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on NO button!");
}}
>
NO
</Button>
Now see the magic: https://557w4.csb.app/
Code:
import Button from "react-bootstrap/Button";
import "./App.css";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { useState } from "react";
function App() {
const [Text, setText] = useState("this text should change");
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>{Text}</h1>
<Button
className=" btn btn1"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on YES button!");
}}
>
YES
</Button>
{/*// this button should change the text*/}
<Button
className=" btn btn2"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on NO button!");
}}
>
NO
</Button>
</div>
</Row>
</Container>
);
}
export default App;
Preview
Full CodeSandBox: https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js
In this case, you have to use the hook state (Documentation).
So, first of all you have to import the useState hook, then create it and finally use it.
So, your code will be something like that:
import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { useState } from 'react';
function App() {
const [text, setText] = useState("this text should change");
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>{text}</h1>
<Button className=" btn btn1" color="light" onClick={e => setText("new text")}>YES</Button> // this button should change the text
<Button className=" btn btn2" color="light">NO</Button>
</div>
</Row>
</Container>
);
}
export default App;
In my react Project, I want a modal to popup when the input field is in the hover state. I'm using the react-bootstrap modal. But the problem I'm having is that it's only the modal button that displays when the input is in the focus state. The modal should pop up automatically when the input is being focused. My code below. Kindly assist
App Component
import React, { useState, useEffect } from "react";
import stays from "./Components/stays.json";
import FancyModalButton from "./Components/FancyModalButton";
export default function SearchGuest() {
const [Data, setData] = useState([]);
const [filteredData, setFilteredData] = useState(Data);
const [hasFocus, setFocus] = useState(false);
useEffect(() => {
setData(stays);
setFilteredData(stays);
}, []);
return (
<>
<form action="">
{hasFocus ? <FancyModalButton /> : null}
<input
onFocus={() => setFocus(true)}
onBlur={() => setFocus(false)}
type="text"
name="guest"
placeholder="text"
style={{ border: "1px solid yellow" }}
/>
<input type="number" name="location" placeholder="number" />
<button>Search</button>
</form>
{console.log(filteredData)}
</>
);
}
Modal Component
import React, { useState } from "react";
// import Modal from "styled-react-modal";
import { Button, Modal } from "react-bootstrap";
export default function FancyModalButton() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
The Image of What I have
Please apologize my lack of knowledge but I'm new to React and JavaScript.
I'm building a Website where I have a Sidebar and a Navbar on top of the page. The Sidebar is activated / deactivated via an hamburger menu which is located in the Navbar-component. It is activated via CSS-classes: <nav className={isActive ? 'nav-menu active' : 'nav-menu'}>
My Problem now is, that I dont know how to transfer the variables toggleButton and isActive from the Navbar.jsx where they are declared to the Sidebar.jsx where I need them to activate my Sidebar.
Do I need to import the js files? Is it possible to export isActive and toggleButton seperatly from the JSX-Code?
Thanks for your help! :)
This is my Code:
Navbar-component
import React from "react";
import Navbar from "react-bootstrap/Navbar";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Nav from "react-bootstrap/Nav";
import FormControl from "react-bootstrap/Form";
import Dropdown from "react-bootstrap/Dropdown";
import './Navbar.css';
const NavbarTop = () => {
const [isActive, setIsActive] = useState(false)
const toggleButton = useCallback(
() => setIsActive(prevState => !prevState),
[],
);
return (
<>
<Navbar className="background-color" variant="light">
<Navbar.Brand href="#home">
<img
src="https://pbs.twimg.com/profile_images/603568605796634624/Nq0nXZZA_400x400.jpg"
width="30"
height="30"
className="d-inline-block align-top"
alt="React Bootstrap logo"
/>
</Navbar.Brand>
<Dropdown>
<Dropdown.Toggle Classname="color" rvariant="success" id="dropdown-basic">
Kategorien
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Bücher</Dropdown.Item>
<Dropdown.Item href="#/action-2">Veranstaltungen</Dropdown.Item>
<Dropdown.Divider />
<Dropdown.Item href="#/action-3">Etwas Posten</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-primary">Search</Button>
</Form>
<Link to='#' className='menu-bars'>
<HamburgerSpring className="Hamburger"
buttonColor="transparent"
barColor="#007466"
buttonWidth={35}
{...{ isActive, toggleButton }}
/>
</Link>
</Animate>
</Navbar>
</>
);
};
export default NavbarTop;
Sidebar-component:
import React, { useState, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { SidebarData } from './SidebarData';
import { IconContext } from 'react-icons';
import {Animate} from 'react-rebound';
import { HamburgerSpring } from 'react-animated-burgers';
import './Sidebar.css';
function Sidebar(isActive, toggleButton) {
return (
<>
<IconContext.Provider value={{ color: 'white' }}>
<nav className={isActive ? 'nav-menu active' : 'nav-menu'}>
<div className='nav-menu-items'>
<ul onClick={toggleButton}>
{SidebarData.map((item, index) => {
return (
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
</div>
</nav>
</IconContext.Provider>
</>
);
}
export default Sidebar;
One possible approach is to move the state one level up.
const ParentComponent = () => {
const [isActive, setIsActive] = useState(false)
const toggleButton = useCallback(
() => setIsActive(prevState => !prevState),
[],
);
.....
.....
{/* You can use like this */}
<SideBar isActive={isActive} toggleButton={toggleButton} />
<NavBar isActive={isActive} toggleButton={toggleButton} />
}
Alternatively, you can use the context API to store to hold the state and access it anywhere within the app. In your case, I think the first option is a better idea given it's simple nature.
This is where you'd lift state up, outside of those into a container of sorts.
function Container() {
const [toggleIsActive, setToggleIsActive] = useState(false);
return (
<Navbar ... toggleIsActive={toggleIsActive} setToggleIsActive={setToggleIsActive} />
<Sidebar ... toggleIsActive={toggleIsActive} setToggleIsActive={setToggleIsActive} />
)
}
Essentially you track that from higher up in the tree while providing the values/methods for changing to the children components.
I'm new to react and it is kinda hard to understand the one way data flow on it, i was making a simple app and i'm using mdbootstrap for some ready bootstrap components, I imported the component of a modal (which has a button when clicked it toggles a modal) so in my app i have cards, each one has a button that's supposed to toggle the button, but i couldn't figure out how to link the card's button with the mdbootstrap component's button.
The Card component:
import React, { Component } from 'react';
import ModalPage from './modal.jsx'
class Card extends Component {
render() {
return (
<div>
<div className="card m-5" style={{ width: '18rem' }}>
<img src={this.props.img} className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{this.props.title}</h5>
<p className="card-text">{this.props.desc}</p>
<button onClick={/*I don't know what exactly i should put here */}></button>
</div>
</div>
</div>
)
}
}
export default Card;
The modal componant:
import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
class ModalPage extends Component {
state = {
modal13: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
{/* This is the button I want to click when clicking the card's button */}
<MDBBtn color="primary" onClick={this.toggle(13)}>
Modal
</MDBBtn>
<MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
<MDBModalHeader toggle={this.toggle(13)}>
{this.props.title}
</MDBModalHeader>
<MDBModalBody>
{/* edit here */}
{this.props.content}
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(13)}>
Close
</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
Rather than having 2 click events you only need one on the child component. Instead of trying to send a click to the parent button in order to call toggle() just pass the toggle function to the child to be called:
Card:
import React, { Component } from 'react';
import ModalPage from './modal.jsx'
class Card extends Component {
render() {
return (
<div>
<div className="card m-5" style={{ width: '18rem' }}>
<img src={this.props.img} className="card-img-top" />
<div className="card-body">
<h5 className="card-title">{this.props.title}</h5>
<p className="card-text">{this.props.desc}</p>
//*****************************************
<button onClick={this.props.click}></button>
//*****************************************
</div>
</div>
</div>
)
}
}
export default Card;
Modal:
import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
class ModalPage extends Component {
state = {
modal13: false
}
toggle = nr => () => {
let modalNumber = 'modal' + nr
this.setState({
[modalNumber]: !this.state[modalNumber]
});
}
render() {
return (
<MDBContainer>
{/* I am assuming that this is a reference to <Card /> - simply pass in the onClick function as a parameter. You can even use onClick here and this.props.onClick in the child element */}
<MDBBtn color="primary" click={this.toggle(13)}>
Modal
</MDBBtn>
<MDBModal isOpen={this.state.modal13} toggle={this.toggle(13)}>
<MDBModalHeader toggle={this.toggle(13)}>
{this.props.title}
</MDBModalHeader>
<MDBModalBody>
{/* edit here */}
{this.props.content}
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" onClick={this.toggle(13)}>
Close
</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default ModalPage;
I want to show all the details filled in the html form on another page using react js. I have created the html form which is the landing page. And after clicking on submit all the information should be displayed on another page.
My form.js page for creating the html form
import React, { component } from 'react';
var details = () => {
return(
<div>
<form>
Name: {" "}
<input type="text" placeholder="Enter name" /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number" />
<br />
<input type="submit" value="submit"/>
</form>
</div>
);
}
export default details;
My app.js page
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Details from './form/form';
function App() {
return (
<div className="App">
<header className="App-header">
<Details />
</header>
</div>
);
}
export default App;
The data which you'll store in react state will be in browser memory and on refresh you'll lose that data.
In case, If you want functionality like the preview on form submit then you can store data in state and show/hide the preview on form submit.
So, Basically you can use state or some third party state management library to store the data. Here is a basic example of how you can achieve in the same details component.
import React, { useState } from 'react';
const Details = () => {
const [name, setName] = useState('');
const [number, setNumber] = useState(null);
const [showPreview, setShowPreview] = useState(false);
return(
<div>
{!showPreview && <form onSubmit={e => e.preventDefault()}>
Name: {" "}
<input type="text" placeholder="Enter name" onChange={e => setName(e.target.value)} /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number" onChange={e => setNumber(e.target.value)} />
<br />
<input type="button" value="submit" onClick={() => setShowPreview(!showPreview)}/>
</form>}
{showPreview && (<div>
<p>{name}</p>
<p>{number}</p>
</div>)}
</div>
);
}
export default Details;
Again, This answer is based on lots of assumptions. Maybe we need some more details in the question to have a precise answer.
In case if you want to display the same data on any other page then you can use Redux. Which can store the data in the redux store and you display the same data on another page.
First, on the app we want to create a function that can receive the data, then send it to the component as a prop:
import React from 'react';
import Details from './form';
function App() {
const getFormData = function (name, number) {
console.log('Name: ', name, 'Number: ', number)
}
return (
<div className="App">
<header className="App-header">
<Details sendFormData={getFormData} />
</header>
</div>
);
}
export default App
Then, inside the component you want to set each input to update their state as they change. When you click submit, you pass the state to the up to the app components getFormData function.
import React, { useState } from 'react';
const Details = (props) => {
const [userName, setName] = useState('');
const [userNumber, setNumber] = useState('');
const handleSubmit = () => {
props.sendFormData(userName, userNumber)
}
return (
<div>
Name: {" "}
<input type="text" placeholder="Enter name"
onChange={event => setName(event.target.value)} /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number"
onChange={event => setNumber(event.target.value)} />
<br />
<button onClick={() => handleSubmit()} >Submit</button>
</div>
);
}
export default Details;