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';
Related
Suppose I have a component that a parameter from another component called jobData. The component could be a value or be undefined. If it has a value, I want to assign it to a textField property called defaultValue. If jobData is undefined, I want to assign it to something else. I tried the below in my code, but it didn't work. Is there any/another way to do this?
import React from 'react'
import {Dialog, TextField} from '#mui/material'
export default function myFunction({jobData}) {
return(
<div>
<form>
<TextField
autoFocus
margin="dense"
width="100%"
id="my_id"
label="My ID"
type="text"
name="myID"
defaultValue={if({jobData.length} > 0){
{jobData[0]['id']}
} else { {jobData.length.toString()}
}
/>
</form>
</div>
)
Try using encapsulation
import React from 'react'
import {Dialog, TextField} from '#mui/material'
export default function myFunction({jobData}) {
function isJobDataUndefined(){
if(jobData.length > 0){
return jobdata[0]['id']
}
return jobData.length.toString()
}
return(
<div>
<form>
<TextField
autoFocus
margin="dense"
width="100%"
id="my_id"
label="My ID"
type="text"
name="myID"
defaultValue={isJobDataUndefined()}
/>
</form>
</div>
)
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".
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 have a form in APP.js. upon submitting the form i need to display the data what i have entered in the form.In the reducer function , after dispatching the action in App.js i am trying to update the redux state . I have gone wrong here and stucked more than 2hrs. can anyone please help??
//App.js
import React,{Component} from 'react';
import {action1} from './Actions/action1'
import './App.css';
import {connect} from 'react-redux'
import Display from './Components/Display'
const mapDispatchToProps=(dispatch)=>{
return{
submitHandler:(details)=>dispatch(action1(details))
}
}
class App extends Component {
constructor(){
super();
this.state={
details: {FirstName:'', LastName:'', Age: ''}
}
}
nameHandler=(event)=>{
const details = this.state.details;
details[event.target.name]= event.target.value;
this.setState({details});
}
SubmitHandler=(event)=>{
event.preventDefault()
/*
const firstname=this.state.details.FirstName
const lastname=this.state.details.LastName
const age=this.state.details.Age
*/
this.props.submitHandler(this.state.details)
}
render(){
return (
<div className="App">
<form onSubmit={this.SubmitHandler}>
<div className="form-group">
<input
type="text"
placeholder="FirstName"
value={this.state.details.FirstName}
onChange={this.nameHandler}
className="form-control"
name="FirstName"
/>
</div>
<div className="form-group">
<input
type="text"
placeholder="LastName"
value={this.state.details.LastName}
onChange={this.nameHandler}
className="form-control"
name="LastName"
/>
</div>
<div className="form-group">
<input
type="text"
placeholder="Age"
value={this.state.details.Age}
onChange={this.nameHandler}
className="form-control"
name="Age"
/>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">Submit Form</button>
</div>
</form>
<Display/>
</div>
);
}
}
//my action
import {SUBMISSION} from '../Constants/actiontypes'
export const action1=(body)=>{
console.log(body)
return{
type:SUBMISSION,
payload:body
}
}
//my reducer
import {SUBMISSION} from '../Constants/actiontypes'
const reducer1=(state=[],action)=>{
if(action.type===SUBMISSION){
return [...state,{firstname: action.payload.FirstName,lastname:action.payload.LastName,age:action.payload.Age}];
}
return state
}
export default reducer1
i can see what ever the values entered through action.payload but failed to update the state
return [...state,{firstname:
action.payload.FirstName,lastname:action.payload.LastName,age:action.payload.Age}];
You are returning an array make it object.
return {
...state,
firstname: action.payload.FirstName,
lastname: action.payload.LastName,
age:action.payload.Age
};
I am getting error while using redux-form
Error msg in console:
bundle.js:32511 Uncaught Error: You must either pass handleSubmit()
an onSubmit function or pass onSubmit as a prop(…)
the above error appeared on page load and button click
Please refer to the below code sample which cause the console error.
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';
class PostsNew extends Component {
render() {
const { fields: { title, categories, content }, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.props.createPost)}>
<h3>Create a new Post</h3>
<div className="form-group">
<label>Title</label>
<input type="text" className="form-control" {...title}/>
</div>
<div className="form-group">
<label>Categories</label>
<input type="text" className="form-control" {...categories}/>
</div>
<div className="form-group">
<label>Content</label>
<textarea className="form-control" {...content}/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
);
}
}
export default reduxForm({
form: 'PostsNewForm',
fields: ['title', 'categories', 'content']
}, null, { createPost })(PostsNew);
This was a step by step follow of StephenGrider redux tutorial
Thanks in advance :)
If PostsNew is Container (if this is directly invoked form Routes) then you have to make handleSubmit function instead of taking from this.props
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';
class PostsNew extends Component {
handleSubmit(formValues){
console.log(formValues);
//do what ever you want
}
render() {
const { fields: { title, categories, content } } = this.props;
return (
<form onSubmit={this.handleSubmit(this.props.createPost)}>
<h3>Create a new Post</h3>
<div className="form-group">
<label>Title</label>
<input type="text" className="form-control" {...title}/>
</div>
<div className="form-group">
<label>Categories</label>
<input type="text" className="form-control" {...categories}/>
</div>
<div className="form-group">
<label>Content</label>
<textarea className="form-control" {...content}/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
);
}
}
OR
In case PostsNew is React Component that is used inside a Container then you can pass handleSubmit in props of PostsNew
<PostsNew
handleSubmit={ (values) => {console.log(values)}}
/>
You need to pass onsubmit props from parent component
import React from 'react';
import { connect } from 'react-redux';
import { initialize } from 'redux-form';
import PostsNew from './PostsNew';
class App extends React.Component {
handleSubmit(data) {
console.log('Submission received!', data);
this.props.dispatch(initialize('contact', {})); // clear form
}
render() {
return (
<div id="app">
<h1>App</h1>
<PostsNew onSubmit={this.handleSubmit.bind(this)}/>
</div>
);
}
}
export default connect()(App);
I was running into the same problem until I explicitly imported connect into my file. After that, I was able to call this.props.createPost successfully.
This is my solution:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form'
import { createPost } from '../actions/index';
import { connect } from 'react-redux';
class PostsNew extends Component {
render() {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.props.createPost)}>
<h3>Create a New Post</h3>
<div className="form-group">
<label>Title</label>
<Field name="title" component="input" type="text" className="form-control" placeholder="Title" />
</div>
<div className="form-group">
<label>Categories</label>
<Field name="categories" component="input" type="text" className="form-control" placeholder="Title" />
</div>
<div className="form-group">
<label>Content</label>
<Field name="content" component="textarea" type="text" className="form-control" placeholder="Title" />
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
);
}
}
export default connect(null, {createPost})(reduxForm({
form: 'PostsNew'
})(PostsNew));
This works perfectly. Check your action creator there should be a typo error in your action creator. Please refer the below action creator. If you followed the steps as he mentioned, this should work perfectly. What the error says is you don't have something called createPost in your props. Further more you can find my working project here in github.
export function createPost(props) {
console.log(props);
const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, props);
return {
type: CREATE_POST,
payload: request
};
}
please install version 5 of redux-form.
npm install --save redux-form#5