I'm trying to use a spinbox in my code but whenever I try changing the values using onChange, the app crashes.
I also tried using onValueChange but it's getting ignored and I don't know what the problem is:
item.js
import NumericInput from "react-numeric-input";
import { Row, Col, ListGroup } from "react-bootstrap";
function ItemScreen() {
const [qty, setQty] = useState(1);
return (
<div>
<h2 className="text-center mb-3">Order</h2>
<hr></hr>
<Row>
<Col md={8}>
<ListGroup variant="flush">
<ListGroup.Item>
<Row>
<Col>Apple</Col>
<Col>
<NumericInput
min={1}
max={100}
onChange={(e) => setQty(e.target.value)}
value={qty}
/>
</Col>
<Col>
500 x {qty} = {qty * 500}
</Col>
</Row>
</ListGroup.Item>
</ListGroup>
</Col>
</Row>
</div>
);
}
export default ItemScreen;
the NumericInput component event just return the numeric value so you can this I guess :
<NumericInput
min={1}
max={100}
onChange={(value) => setQty(value)}
/>
The value will always be of type string.
So you need to cast it as a number.
onChange={(e) => setQty(Number(e.target.value))}
Related
I am new to react,
I am using card, when card "on click" i need to get the card object and place it in form dynamically,
(full code)
My code:
// reactstrap components
import {useState} from "react"
import {
Card,
CardHeader,
CardBody,
CardTitle,
Col,
Input,
FormGroup,
Form,
Container,
Row,
UncontrolledDropdown,
DropdownToggle,
DropdownItem,
DropdownMenu,
Button,
} from "reactstrap";
import Header from "components/Headers/Header.js";
import 'react-toastify/dist/ReactToastify.css';
import Navbar from "components/Navbars/modulenavbar"
import axios from "axios";
import React from "react";
import { Link } from "react-router-dom";
var apitoken= localStorage.getItem('apitoken');
const api=axios.create({baseURL:"https://api/v1/account"})
const options = {
headers: {'Authorization': apitoken}
}
const Accounts = () => {
const [accounts, setaccount] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [disabled, setDisabled] = useState(false);
React.useEffect(async () => {
const response = await api.get("/",options);
setaccount(response.data.response);
setLoading(false);
}, []);
if (loading) {
return <>Loading...</>;
}
function handleGameClick() {
setDisabled(!disabled);
}
This is were i get all my api value and append it
return (
<>
{accounts.map((student, index) => {
const { id, name, phone, email } = student //destructuring
return (
<>
<div style={{ width: "18rem" }} onClick={() => console.log(student)}>
I want to pass the object "Student" and use it in the default value of the forms shown below
<Card className="card-stats mb-4 mb-lg-1">
<CardBody>
<Row>
<div className="col">
<CardTitle className="h4 font-weight-bold mb-0">
{name}
</CardTitle>
<span className="h5">{phone}</span>
</div>
<div className="col">
<span className="h5">{email}</span>
</div>
</Row>
</CardBody>
</Card>
</div>
</>
)
})}
</>
)
}
Form Shows here
const Display = () => {
return (
<>
<Header />
<Container className="mt--7" fluid>
{/* Table */}
<Row>
<Col className="order-xl-1 " xl="2">
<CardHeader className="bg-white border-0">
<Row className="align-items-center">
<Col xs="8">
<Link to="/admin//accounts" className="ni ni-bold-left">
<span> View Account</span></Link>
</Col>
</Row>
</CardHeader>
<Card className="bg-secondary shadow navbar-nav-scroll">
<Accounts/>
</Card>
</Col>
<Col className="order-xl-1" xl="10">
<Card className="bg-secondary shadow">
<Navbar/>
<Row >
<Col className="shadow navbar-nav-scroll">
<Form>
<h6 className="heading-small text-muted mb-4">
Account Information
</h6>
<div className="pl-lg-4">
<Row>
<Col >
<FormGroup>
<label
className="form-control-label"
htmlFor="input-username"
>
Account Name
</label>
<Input
className="form-control-alternative"
id="input-username"
placeholder="Username"
type="text"
defaultValue={student.value}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col >
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
Email address
</label>
<Input
className="form-control-alternative"
id="input-email"
placeholder="jesse#example.com"
type="email"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col >
<FormGroup>
<label
className="form-control-label"
htmlFor="input-email"
>
Phone
</label>
<Input
className="form-control-alternative"
id="input-phone"
placeholder="Phone"
type="text"
/>
</FormGroup>
</Col>
</Row>
</div>
</Form>
</Col>
<Col xs="9">
<Card className="card-stats mb-4 mb-lg-0">
<CardBody>
<div>
<Row className="align-items-center">
<Col xs="8">
</Col>
<Col className="text-right" xs="4">
<Button
color="success"
href="#pablo"
// onClick={save}
>
Save
</Button>
</Col>
</Row>
</div>
</CardBody>
</Card>
</Col>
</Row>
</Card>
</Col>
</Row>
</Container>
</>
);
};
export default Display;
Note:The above three sections of code is in the single component
I just want to dynamically append the values from object during "on click" event
Thanks in advance
You can store the clicked student value in state and pass it on to whichever component needs it as props
const Accounts = () => {
const [selectedStudent, setSelectedStudent] = useState({});
...
const handleStudentClick = (student) => {
setSelectedStudent(student)
}
return (
<>
{accounts.map((student, index) => {
const { id, name, phone, email } = student //destructuring
return (
<>
<div style={{ width: "18rem" }} onClick={() => handleStudentClick(student)}>
Now you can pass selected student as props to your child component
I'm trying to make a reusable input component. When data enters I want to handle those input data in the same place where I use that reusable input component. Not passing that as props.
I'm getting an error
Uncaught TypeError: Cannot read property 'value' of undefined
Can anyone give me any idea about how to handle data in such an instance?
InputFieldWithImage.js
import React, {useState} from "react";
import { Form, FormGroup, Input } from 'reactstrap';
function InputFieldWithImage(props) {
const [inputType] = useState(props.type)
const [inputValue, setInputValue] = useState('')
function handleChange(event){
console.log("Input.js");
console.log(inputValue);
setInputValue(event.target.value);
if(props.onChange) props.onChange(inputValue)
}
return (
<>
<Input type={inputType} value={inputValue} name="input-form" onChange={handleChange} class="inputclass"/>
</>
);
}
export default InputFieldWithImage;
AddTicket.js
import { Row, Col } from 'reactstrap';
import { Form, FormGroup, Input } from 'reactstrap';
import ActionButton from './../../components/ButtonComponent';
import InputFieldWithImage from './../../components/InputField/InputFieldWithImage'
import { render } from 'react-dom';
import ReactQuill from 'react-quill';
const AddTicket = (props) => {
const [assignee, setAssignee] = useState('');
const handleSubmit = (evt) => {
evt.preventDefault();
console.log('Assignee:' + assignee);
props.handleClose();
};
const test = () => {
console.log("text");
console.log('Assignee:' + assignee);
};
return (
<div className="popup-box">
<div className="box">
{/* <span className="close-icon" onClick={props.handleClose}>
x
</span> */}
<Form onSubmit={handleSubmit} style={{paddingLeft:30,paddingTop:50}}>
<Row style={{ paddingBottom: 50 }}>
<Col sm={11} xs={11} md={11}>
<h1>Add new ticket </h1>
</Col>
<Col onClick={props.handleClose} m={1} xs={1} md={1}>
<h1 className="close-icon">X </h1>
</Col>
</Row>
<FormGroup>
<Row style={{ marginBottom: '25px' }}>
<Col sm={2}>
<h4>Assignee</h4>
</Col>
<Col sm={2}>
<InputFieldWithImage value={assignee} onChange={(e) => setAssignee(e.target.value)} />
</Col>
</Row>
</FormGroup>
<Row>
<Col sm={2}></Col>
<Col>
<ActionButton text="Send" />
</Col>
</Row>
</Form>
</div>
</div>
);
};
export default AddTicket;
You need to pass event instead of inputValue . As there is input.target.value . That's why its giving error
function handleChange(event) {
console.log("Input.js");
console.log(inputValue);
setInputValue(event.target.value);
if (props.onChange) props.onChange(event);
}
Here is demo: https://codesandbox.io/s/hidden-tree-vr834?file=/src/App.js
I have a problem with my react hooks not running properly.
I can't update the user's state. The following image depicts the error messages I get when trying to fetch the data and render it:
It does not seem like my component will render.
Here is my component's source code as requested in the comments:
import React, { useEffect, useState } from "react";
import axios from "axios";
import map from "../map.png";
import { Row, Col } from "react-bootstrap";
const Profile = (props) => {
const { id } = props.match.params;
const [user, setUser] = useState(0);
useEffect(() => {
axios
.get(`http://jsonplaceholder.typicode.com/users`)
.then((response) => {
const userAuthor=response.data.filter( (postAuthor) => postAuthor.id !== +id);
setUser(userAuthor=>userAuthor)
})
.catch((error) => {
console.log(error);
});
},[]);
return (
<div className="content-card">
{
console.log(user)
}
<Row className="justify-content-center post">
<Col md="6">
<h1 className="profile-name">{user.name}</h1>
<Row>
<Col md="3" className="profile-key">
Username
</Col>
<Col md="9" className="profile-value">
{user.username}
</Col>
<Col md="3" className="profile-key">
Email
</Col>
<Col md="9" className="profile-value">
{user.email}
</Col>
<Col md="3" className="profile-key">
Phone
</Col>
<Col md="9" className="profile-value">
{user.phone}
</Col>
<Col md="3" className="profile-key">
Website
</Col>
<Col md="9" className="profile-value">
{user.website}
</Col>
<Col md="3" className="profile-key">
Company
</Col>
<Col md="9" className="profile-value">
{user.company}
</Col>
</Row>
</Col>
<Col md="6">
<img src={map} />
</Col>
</Row>
<h2>{user.name}</h2>
</div>
);
};
export default Profile;
This is a problem which occurs when trying to render objects. Your state hooks are just fine. It seems from the comments that you're trying to render user.company which is an object. By changing this to user.company.name your code should run just fine
This is an error because you trying to render an objects !
You can't to return a console.log(user) as UI components, just delete it from return then can you use it after useEffect OR render some data in your UI like name
Your state hooks are likely just fine.
Here I'm calling onChange function on Formik Field but its not calling? How to call custom function on a Formik field?
This is my custom function under React Component:
onStudentScore = (value, form) => {
alert("called");
const maxScore = value.writtenexammaxscore;
console.log(maxScore);
form.getFieldValue("writtenexammaxscore", maxScore);
if (maxScore > form.getFieldValue("writtenexamstudentsscore")) {
alert("MaxScore is less than StudentScore");
}
};
And my Form is created under render and write a onChange function on a StudentScore field. But it's not called? How to call this function?
render() {
const { values, handleSubmit} = this.props
return (
return (
<div>
<h5 align="left">MidTerm Form</h5>
<Card>
<Form onSubmit={handleSubmit}>
<Row>
<Col span={4}>
<b>Written Exam:</b>
</Col>
<Col span={2}>
<Field
name="writtenexammaxscore"
component={AntInput}
type="text"
style={{ width: 40 }}
/>
</Col>
<Col span={2}>outof</Col>
<Col span={3}>
<Field
name="writtenexamstudentsscore"
component={AntInput}
type="text"
style={{ width: 40 }}
onChange={this.onStudentScore}
/>
// I wrote the function on field this way
</Col>
<Col span={2}>
<Divider type="vertical" />
</Col>
</Row>
<Row>
<Col span={10} />
<Col span={8} push={10}>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Col>
</Row>
</Form>
</Card>
</div>
);
}
const MidTermForm = withFormik({
mapPropsToValues: () => ({
writtenexammaxscore: '',
writtenexamstudentsscore: '',
oralexammaximumscore: '',
oralexamstudentsscore: '',
}),
handleSubmit(values, { resetForm }) {
resetForm();
console.log(values)
}
})(MidTermFormComponent)
export default MidTermForm
I tried by extending yup validation schema. Instead of calling a function in onChange
check this code sandbox
I'm stuck on an issue with redux-form. I have a form which is being populated with initialValues. Inside the top level form I have a FieldArray which renders a list of input fields. Each input field has buttons to remove it (via fields.remove(index)) or insert another input right after it (via fields.insert(index+1)). My problem is: when I call fields.insert() the new field gets inserted and registered correctly, but the parent form gets submitted, which it shouldn't. Same happens on fields.push() when the data array has at least one item. But it does not on e.g. fields.remove() or fields.removeAll(). I cannot figure out why/where the submittal occurs. I've spend hours digging through the source and playing around with the official FieldArray example which does work. I couldn't find the issue online so I guess I have a bug somewhere, since this is independent of the redux-form version in use (tried >=6).
Thanks for your help, here's the code.
Parent Form
import React from 'react';
import { Field, FieldArray, reduxForm } from 'redux-form';
import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';
import Button from 'muicss/lib/react/button';
import MaterialInput from '../material/material-input';
import MaterialSelect from '../material/material-select';
import MaterialFieldArray from '../material/material-fieldarray';
import Cover from './cover';
import CheckboxGroup from './checkbox-group';
const MovieDetailsEditForm = props => {
const { handleSubmit, initialValues: { cover: { large: cover }, directors = [], actors = [] } } = props;
const getFSKOptions = () => {
return [
{value: 0, label: 0},
{value: 6, label: 6},
{value: 12, label: 12},
{value: 16, label: 16},
{value: 18, label: 18}
];
};
const getFormats = () => {
return [{value: 'DVD', label: 'DVD'}, {value: 'Blu-ray', label: 'Blu-Ray'}];
}
const getImages = () => props.initialValues.images.map( (image) => ({ value: image.large, checked: false }) );
return (
<Row>
<form className="mui-form" onSubmit={handleSubmit(props.handleFormSubmit)}>
<Col xs="12">
<Button type="submit" color="primary">Speichern</Button>
</Col>
<Col xs="12">
<Row>
<Col xs="12" md="6">
<Row>
<Col xs="12">
<Field name="title" id="title" component={MaterialInput} label="Filmtitel" type="text" />
</Col>
<Col xs="6">
<Field name="duration" id="duration" component={MaterialInput} label={props.initialValues.unit} type="text" />
</Col>
<Col xs="6">
<Field
name="format"
id="format"
options={getFormats()}
component={MaterialSelect}
label="Format"
parse={(value, name) => value ? value : null}
/>
</Col>
<Col xs="12">
<Field
name="fsk"
id="fsk"
options={getFSKOptions()}
component={MaterialSelect}
label="FSK Einstufung"
labelText="Freigegeben ab <<PLACEHOLDER>> Jahren"
parse={(value, name) => value ? value : null}
/>
</Col>
{ directors &&
<Col xs="12">
<h3>Regisseur{directors.length > 1 ? 'e' : ''}</h3>
<FieldArray component={MaterialFieldArray} name="directors" />
</Col>
}
{ actors &&
<Col xs="12">
<h3>Cast</h3>
<FieldArray component={MaterialFieldArray} name="actors" />
</Col>
}
</Row>
</Col>
<Col xs="12" md="6" className="cover">
<Field {...props} name="cover" id="cover" component={Cover} />
</Col>
</Row>
</Col>
<Col xs="12">
<Field {...props} name="images" component={CheckboxGroup} valueProperty="large" />
</Col>
</form>
</Row>
);
}
export default reduxForm({
form: 'MovieDetails',
enableReinitialize: true
})(MovieDetailsEditForm);
material-fieldarray.js
import React from 'react';
import { Field } from 'redux-form';
import Row from 'muicss/lib/react/row';
import Col from 'muicss/lib/react/col';
import Button from 'muicss/lib/react/button';
import MaterialInput from '../material/material-input';
export default props => {
const { fields } = props;
const addEntry = index => fields.insert(index + 1, '');
const removeEntry = index => fields.remove(index);
const renderEntries = () => {
return fields.map((field, index) => {
return (<li key={index}>
<Col xs="7" sm="8" md="7" lg="8">
<Field component={MaterialInput} name={`${field}`} id={`${field}`} />
</Col>
<Col xs="5" sm="4" md="5" lg="4" className="buttons">
<Button variant="fab" size="small" color="primary" onClick={() => addEntry(index)}>+</Button>
<Button variant="fab" size="small" color="danger" onClick={() => removeEntry(index)}>-</Button>
</Col>
</li>);
})
}
return (
fields.length &&
<ul className="inputfield-list">
{ renderEntries() }
</ul>
|| <Button onClick={() => fields.push('')}>Add</Button>
)
}
OK, the problem was a very subtle one and has nothing to do with React or Redux-Form. I forgot to put type="button" on the buttons that add/remove items to the FieldArray.
<Button variant="fab" size="small" color="primary" onClick={() => addEntry(index)}>+</Button>
That's how HTML forms work.