I'm trying to add a component onto my App.js whenever a certain button is clicked. I've been able to do this successfully but now, as soon as I add the component the page refreshes and the component disappears. What am I doing wrong?
Heres the issue on CodeSandBox: https://codesandbox.io/s/github/JojoDuke/miCard-test?file=/src/App.js
App.js
import './App.css';
import CardItem from './Components/CardItem';
import React, { useState } from "react";
import ReactDOM from "react-dom";
function App() {
const [newCard, setNewCard] = useState([]);
const createCard = (e) => {
setNewCard(newCard.concat(<CardItem key={newCard.length}/>));
}
return (
<div className="main">
<div className="block">
<h2 style={{ marginLeft: "20px", marginTop: "10px", }}>Midas</h2>
<div>
<form className="inputForm">
<input type="text" placeholder="Name of Card"/>
<input type="text" placeholder="Mobile Money Number"/>
<input type="text" placeholder="Amount"/>
<button className="card-btn" onClick={createCard}>Create Card</button>
</form>
</div>
</div>
<div className="cards-div">
{newCard}
</div>
</div>
);
}
export default App;
Because your <button> is inside of a form, the default click behaviour is to submit the form (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formenctype). In order to stop the page from submitting, you'll need to add type="button".
Related
I want to import the following components from the app component.
I don't know if the following reason appears.
: 'signUp Component' is declared but its value is not read
Also, clicking the button doesn't work. How can I solve it?
import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
import signUpComponent from './SignUpComponent';
function App() {
const [signUpState, setSignUpState] = useState(false);
function controllSignUp(){
setSignUpState(!signUpState)
}
return (
<div className="App">
<div className ="SignIn">
<h1>LOGIN</h1>
<form className = "loginForm">
<label htmlFor="email">email</label>
<input
id="email"
type="email"
name="email"
placeholder="test#email.com"
/>
<label htmlFor="password">password</label>
<input
id="password"
type="password"
name="password"
placeholder="****************"
/>
<button type="submit">login</button>
</form>
<button onClick={controllSignUp}>signin</button>
{signUpState && <signUpComponent/>}
</div>
</div>
);
}
export default App;
User-Defined Components Must Be Capitalized.
Instead of
import signUpComponent from './SignUpComponent';
you need to do
import SignUpComponent from './SignUpComponent';
I have a condition like this.
I want to enable text input if the button is pressed and can edit the text in it.
the question is how to make the function in react js?
my Code:
function App() {
return (
<div className="App">
<label>URL : </label>
<input
placeholder='http://localhost:3000/123456'
disabled
/>
<button type='submit'>Active</button>
</div>
);
}
export default App;
Use useState hook and onClick event like in this example.
import React, { useState } from "react";
function App() {
const [active, setActive] = useState(false)
return (
<div className="App">
<label>URL : </label>
<input
placeholder='http://localhost:3000/123456'
disabled={!active}
/>
<button
type='submit'
onClick={() => setActive(!active)}
>
Active
</button>
</div>
);
}
I want to use the state of the input in another component in React. So I have a component and in this component, I have a form.
import React, { useState } from "react";
import { Form } from "react-bootstrap";
function Jumbotron() {
const [inputFrom, setInputFrom] = useState("");
return (
<Form className="shadow p-3 mb-5">
<Form.Group controlId="formGroupFrom">
<Form.Label className="form-subtitle">Title</Form.Label>
<Form.Control
type="text"
placeholder="Enter input"
onChange={(event) => setInputFrom(event.target.value)}
/>
</Form.Group>
</Form>
);
}
export default Jumbotron;
So I want to use the 'inputFrom' in other component and I just want to show it. I will do it in several components so could you give me an advice about it?
import React from "react";
import { Container } from "react-bootstrap";
function Checkout() {
return (
<Container>
<div className="shipment-info">
<div className="basic">
<div className="col-2 title">From</div>
<div className="col-4 info">{inputFrom}</div>
</div>
</div>
</Container>
);
}
export default Checkout;
You can pass down the prop to another component like so
<NextComponent propYouWantToPass={inputFrom} />
and use it in the next component like props.propYouWantToPass, assuming you got the props in the next component settings props as a parameter
const NextComponent = (props) => {
return(
<View>
<Text>{props.propYouWantToPass}</Text>
</View>
)
}
As other already said, if you are planning to use Checkout component inside Jumbotron component as a child.
The solution is easy, you just pass inputForm as prop to Checkout and receive or inherit from Jumbotron
Could be something like this:
import React, { useState } from "react";
import { Form } from "react-bootstrap";
import { Checkout } from "./Checkout";
function Jumbotron() {
const [inputFrom, setInputFrom] = useState("");
return (
<>
<Form className="shadow p-3 mb-5">
<Form.Group controlId="formGroupFrom">
<Form.Label className="form-subtitle">Title</Form.Label>
<Form.Control
type="text"
placeholder="Enter input"
onChange={(event) => setInputFrom(event.target.value)}
/>
</Form.Group>
</Form>
{/* <-- give any name instead "inputData" */}
<Checkout inputData={inputForm} />
</>
);
}
export default Jumbotron;
Found your inputForm on Checkout as props.inputData
*Ref: https://reactjs.org/docs/components-and-props.html#rendering-a-component
I am trying to make the menuIcon funtional in react js. I am trying to make it like when I click it the menu will open with login options in mobile view and when I click the menu again it will close like a hamburger menu. I have tried the below code and its not working i want it in reactjs functional based working code. I am new to reactjs pls help.
The code is as below:
import React,{ useState }from 'react'
import './Navbar.css'
import { Link } from "react-router-dom"
import logo from './images/logo.png'
import { useHistory } from 'react-router-dom'
import MenuIcon from '#material-ui/icons/Menu'
function Navbar() {
const[openMenu,setOpenMenu] = useState();
const handleClick = () => {
setOpenMenu(true);
}
const handleClose = () => {
setOpenMenu(false);
}
return (
<div className="navbar">
<Link to="/" className="header__link">
<img
className="header__logo"
src={logo}
alt="logo"
/>
</Link>
<div className="header__nav">
<form7 onSubmit={formSubmit}>
<input type="text" placeholder="Email" name="name" value={data.name} onChange={InputEvent}/>
<input type="password" placeholder="Password" name="password" value={data.password} onChange={InputEvent}/>
<button className="button__nav" onClick={() => history.push('/myvehicles')}>Log In</button>
<MenuIcon fontSize="large" color="primary" open={handleClick} onClose={handleClose}/>
</form7>
</div>
</div>
)
}
export default Navbar
I am trying to integrate Amplify Auth with a React application.
I am using AmplifyAuthenticator from #aws-amplify/ui-react package to customize the auth flow.
Though I can use AmplifySignIn component and customize it, I want to create a totally custom instead of AmplifySignIn.
Following is what my custom component looks like:
import React from 'react';
import { Auth } from 'aws-amplify';
import { useForm } from "react-hook-form";
export default function CustomSignIn(props){
const { register, reset, errors, handleSubmit } = useForm();
const onSubmit = async data => {
await Auth.signIn(data.username, data.password);
};
return(
<form className="mt-5" onSubmit={handleSubmit(onSubmit)} slot={props.slot}>
<h4>Login</h4>
<p>Need an account? <span>Create an account</span></p>
<div className="form-group">
<label>Email address</label>
<input type="username" name="username" className="form-control" ref={register({required: true})}/>
</div>
<div className="form-group">
<label>Password</label>
<input type="password" name="password" className="form-control" ref={register({required: true})}/>
</div>
<button type="submit" class="btn btn-primary btn-block">Continue</button>
</form>
);
}
Following is how I am trying to manage auth state:
import React, {useEffect} from 'react';
import { AmplifyAuthenticator } from '#aws-amplify/ui-react';
import '../styles/App.scss';
import { AuthState, onAuthUIStateChange } from '#aws-amplify/ui-components';
import ProtectedRoutes from './ProtectedRoutes';
import logo from '../assets/logo.svg';
import CustomSignIn from '../modules/auth/CustomSignIn';
function App() {
const [authState, setAuthState] = React.useState();
const [user, setUser] = React.useState();
useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
setAuthState(nextAuthState);
setUser(authData)
});
}, []);
return ( authState === AuthState.SignedIn && user )
?
(
<ProtectedRoutes />
)
:
(
<div className="container-fluid container-fluid--auth">
<div className="row">
<div className="col-md-8">
<div className="row">
<div className="col-12 py-3">
<img className="logo" src={logo} alt="logo" />
</div>
</div>
<div className="row">
<div className="col-md-4 offset-md-4">
<AmplifyAuthenticator>
<CustomSignIn slot="sign-in" />
</AmplifyAuthenticator>
</div>
</div>
</div>
<div className="col-md-4 col--auth-sidebar">
</div>
</div>
</div>
);
}
export default App;
The thing is, how do I take the user to the Sign Up page when the user clicks on the "Create an account" button on the Sign In page?