I have a form that has 10+ input fields that update the state of the class. To make things look cleaner I moved all input fields with labels into a separate component so I could re-use it for each input instead. This component takes 2 parameters and serves as a child in my main class.
child component:
const Input = ({ name, placeholder }) => {
return (
<div className="wrapper">
<Row className="at_centre">
<Col sm="2" style={{ marginTop: "0.5%" }}><Form.Label>{ name }</Form.Label></Col>
<Col sm="5"><Form.Control placeholder={ placeholder }/></Col>
</Row>
</div>
)
}
parent:
state = { name: '', description: '' }
handleSubmit = (e) => {
e.preventDefault()
console.log(this.state);
}
render(){
return(
<Form style={{ marginBottom: "5%", padding: 10 }} onSubmit={ this.handleSubmit } >
<Input name="Name: " placeholder="How is it called?" onChange={ (event) => this.setState({name: event.target.value}) }/>
<Input name="Description: " placeholder="Please describe how does it look like?" onChange={ (event) => this.setState({description: event.target.value}) }/>
<Button variant="outline-success" size="lg" type="submit" >SUBMIT</Button>
</Form>
)
}
After I did that I can't find the way how to update the state from my child components when the text is changed. All my attempts to do so either crashed the website or did nothing. I am still new to React.js so any feedback is appreciated.
Pass onChange event to your child component and wire it with Form.Control control.
Your Input component will be,
const Input = ({ name, placeholder, onChange }) => {
return (
<div className="wrapper">
<Row className="at_centre">
<Col sm="2" style={{ marginTop: "0.5%" }}>
<Form.Label>{name}</Form.Label>
</Col>
<Col sm="5">
<Form.Control onChange={onChange} placeholder={placeholder} />
</Col>
</Row>
</div>
);
};
And your Parent component is,
class Parent extends React.Component {
state = { name: "", description: "" };
handleSubmit = e => {
e.preventDefault();
console.log(this.state);
};
render() {
return (
<Form
style={{ marginBottom: "5%", padding: 10 }}
onSubmit={this.handleSubmit}
>
<Input
name="Name: "
placeholder="How is it called?"
onChange={event => this.setState({ name: event.target.value })}
/>
<Input
name="Description: "
placeholder="Please describe how does it look like?"
onChange={event => this.setState({ description: event.target.value })}
/>
<Button variant="outline-success" size="lg" type="submit">
SUBMIT
</Button>
</Form>
);
}
}
Working Codesandbox here.
In React, properties flow from the parent component to the child component, so you cannot directly "pass" the state from the child to the parent.
What you can do however is to have the parent pass a callback function to the child that will be called to update the parent's state.
Here is an example:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
}
updateName(name) {
if (name === this.state.name) return;
this.setState({ name });
}
render() {
return (
<div>
<p>The name is {this.state.name}</p>
<ChildComponent handleNameUpdate={name => this.updateName(name)} />
</div>
);
}
}
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
};
}
handleInputChange(e) {
this.setState({ name: e.target.value });
this.props.handleNameUpdate(e.target.value)
}
render() {
return <input type="text" value={this.state.name} onChange={e => this.handleInputChange(e)} />;
}
}
You have to build what is known as a controlled component.
const Input = ({ label, name, onChange, placeholder }) => (
<div className="wrapper">
<Row className="at_centre">
<Col sm="2" style={{ marginTop: "0.5%" }}>
<Form.Label>{ label }</Form.Label></Col>
<Col sm="5">
<Form.Control name={ name }
value={ value }
placeholder={ placeholder }
onChange={ onChange }
/>
</Col>
</Row>
</div>
)
And in your parent,
state = { name: '', description: '' }
handleChange = ({ target: { name, value } }) => this.setState({ [name]: value })
render() {
const { name, description } = this.state
<Form style={{ marginBottom: "5%", padding: 10 }} onSubmit={ this.handleSubmit } >
<Input label="Name: " name="name" value={name} onChange={handleChange}/>
<Input label="Description: " description="description" value={description} onChange={handleChange}/>
<Button variant="outline-success" size="lg" type="submit" >SUBMIT</Button>
</Form>
}
Advice
Try to avoid manufacturing lambda methods inside the render function as much as possible and have a class property as a lambda method so that lambdas do not need to be manufactured on every render cycle.
Related
I'm working my practice app using ReactJs and Django. My problem is when I update the Data via Axios "onChange" event not working.
updateForm.js
class Contact extends Component {
constructor(props) {
super(props);
this.state = {
Name: '',
Contact: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleformsubmit = this.handleformsubmit.bind(this);
}
handleformsubmit = (event, requestType, id) => {
const Name = event.target.elements.Name.value;
const Contact = event.target.elements.Contact.value;
switch (requestType) {
case 'put':
return axios.put(`http://127.0.0.1:8000/Contact/${id}/`, {
Name: Name,
Contact: Contact
})
.then(res => console.log(res))
.catch(error => console.log(error));
}
}
handleChange(event) {
this.setState({ Name: event.target.value });
this.setState({ Contact: event.target.value });
}
render() {
const Name = this.state.Item_no;
const Contact = this.state.Supplier;
return (
<Form onSubmit={(event) => this.handleformsubmit(
event,
this.props.requestType,
this.props.id)}>
<div className="container">
<GridContainer component="span">
<Card>
<CardHeader color="primary">
<h4>Update Contact Info</h4>
</CardHeader>
<CardBody>
<GridContainer>
<GridItem sm={12} md={6}>
<CustomInput
labelText="Name"
type="text"
id="Name"
name="Name"
formControlProps={{
fullWidth: true
}}
value={Name}
onChange={this.handleChange}
/>
</GridItem>
<GridItem sm={12} md={6}>
<CustomInput
labelText="Contact"
name="Contact"
type="text"
id="Contact"
formControlProps={{
fullWidth: true
}}
value={Contact}
onChange={this.handleChange}
/>
</GridItem>
I already done searching and tried the possible solution's but nothing works. Nothing wrong with "put" actions but on my onChange event not trigger when I update the data. Help me how to work this.Thank you!
From your code, I can see The onChange function just update the new state and the function handleformsubmit will only be called until you submit the form
It looks like your input value is controlled, which refuses any changes from handleChange
Try value={this.state.Name}
How do i pass a validation value from child component to parents component?
i tried to use props but it didn't work . i tried to pass the 'isValidValue' status
Child Component :
function MilikSendiri({isValidValue}) {
const { register, handleSubmit } = useForm()
function sweetAlertclick(){
Swal.fire({
icon: 'success',
title: 'Data anda sudah tersimpan ',
})
}
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
// validateOnMount
>
{
formik => {
const isValidValue = formik.isValid? ("Data Completed") : ("DData incomplete");
return(
<div>
<div>
Status : {isValidValue}
<label htmlFor="luasTanah"> Luas Tanah </label>
<Field className="formBiodata"
type="text" id="outlined-basic"
placeholder="luasTanah"
fullWidth
id="luasTanah"
name="luasTanah"
margin="normal" variant="outlined"
/>
<ErrorMessage name='luasTanah' component={TextError}/>
</div>
<div>
<label htmlFor="BiayaPBB"> Biaya PBB </label>
<Field className="formBiodata"
type="text" id="outlined-basic"
placeholder="BiayaPBB"
fullWidth
id="BiayaPBB"
name="BiayaPBB"
margin="normal" variant="outlined"
/>
<ErrorMessage name='BiayaPBB' component={TextError}/>
</div>
<Button onClick={sweetAlertclick} type ="submit"
variant="contained" startIcon={<SaveIcon />} color="primary" style={{
marginLeft: '25rem', marginTop: '20px', width: '20rem', height: 45,
fontSize: 22, backgroundColor: '#22689F'}}
disabled={!formik.isDirty && !formik.isValid} >Simpan
</div>
)
}
}
</Formik>
)
}
Parent Component :
function UKTRumah ({isValidValue}) {
return (
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={onSubmit}
// validateOnMount
>
{
formik => {
console.log('Formik props', formik)
return(
<div className ="IsiBiodata">
<Accordion square expanded={expanded === 'panel1'} onChange=.
{handleChange('panel1')} style={{marginLeft: '15rem', marginRight:
'15rem', marginTop: '3rem'}}>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-
header">
<PersonIcon/>
<Typography> Data Rumah</Typography>
<Typography}> { isValidValue }
</Typography>
</AccordionSummary>
<AccordionDetails>
<div className ="IsiBiodata">
<Form>
</div>
</Form>
</div>
</AccordionDetails>
</Accordion>
</div>
)}}
</Formik>
)}
Thank you
Your example code seems to be lacking some key lines to answer the question specifically.
However, generally if it is data that Parent should be aware of, but that the child will make use of, it should be a value of state in the parent, then handed to the child as props. Here's a very small example using functional components:
const Child = ({ formik, setIsValid, isValid }) => {
useEffect(() => {
setIsValid(formik.isValid)
}, [formik.isValid]);
return <input />;
}
const Parent = () => {
const [isValid, setIsValid] = useState(true);
return <Child isValid={isValid} setIsValid={setIsValid} />
}
You can hold the value on your parent and pass a function to change it to your child. I can't really show you that with the code you posted, but I can show an example of what I mean. The parent has a state with an update function setIsValid and passes that to the child. The child can call setIsValid and that will update the isValid value on the parent.
parent
function Parent() {
const [isValid, setIsValid] = useState(false);
return <div>
<Child setIsValid={setIsValid} />
IsValid {isValid}
</div>
}
child
function Child({ setIsValid }) {
return <button onClick={() => setIsValid(true)}>Set Valid</button>
}
I have a problem passing value to handleChange during formik validation.So I created a component whose quantity is added depending on the number of numChild. And I would like when he clicks the icon he can add any number of skills to the skills table.Can someone guide me how to do it correctly? Thanks for the tips
//Parent component
state = {
numChildren: 0 //
};
addComponent = () => {
this.setState({
numChildren: this.state.numChildren + 1
});
};
render()
{
const children = []; // in loop i try created components
//in this place i try set props to child component but i do something wrong and i get error
for (var i = 0; i < this.state.numChildren; i += 1) {
children.push(<SkillComponent key={i} name1={values.skills.basicAttack.name}
name2={values.skills.specialAttack.name}
damage={values.skills.damage}
handleChange={handleChange}/>);
}
return(
<Formik
initialValues={{
name: '',
// here I try to add as many elements as the user creates skills by SkillComponent with this structure
/*
this my single skill
{
basicAttack: {
name: ''
},
specialAttack: {
name: ''
},
damage: 0
}
*/
skills: [
{
basicAttack: {
name: ''
},
specialAttack: {
name: ''
},
damage: 0
}
]
}}
validationSchema={validationSchema}
onSubmit={(values) => {
console.log("Working")
}}
/>
{({
values
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<Form onSubmit={handleSubmit}>
//some code
...
<FontAwesomeIcon
icon={faPlus}
onClick={this.addComponent}// If the user clicks I will increase the numChild
/>
{children}
</Form>
)
</Formik>
And child component
class SkillComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.name1}
handleChage={this.props.handleChange}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.name2}
handleChage={this.props.handleChange}
/>
</Form.Group>
<Form.Group controlId='formBasicEmail'>
<Form.Control
type='text'
name='name'
value={this.props.damage}
handleChage={this.props.handleChange}
/>
</Form.Group>
</div>
);
}
}
export default SkillComponent;
Thanks for all the help
First of all you're trying to access values variable in for loop which is not accessible there. In your case I would start with some generateChildren method which will be responsible for repeating your children components:
getChildren = (values, handleChange) =>
[...Array(this.state.numChildren)].map(num =>
<SkillComponent
key={num}
name1={values.skills.basicAttack.name}
name2={values.skills.specialAttack.name}
damage={values.skills.damage}
handleChange={handleChange}
/>
)
render() {
<Formik>
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<Form onSubmit={handleSubmit}>
<FontAwesomeIcon icon={faPlus} onClick={this.addComponent} />
{this.getChildren(values, handleChange)}
</Form>
)}
</Formik>
}
There is parent component which have handleChange function, I pass to the child that function.
And provide to the input fileds, then there is bug with input fileds, I am not able to change values at all.
ParentComp:
handleChange = (e, data) => {
if (data && data.name) {
this.props.setFieldValue(data.name, data.value)
if (data.name === 'pay_rate') {
console.log('PAY_RATE: ', data)
}
}
}
return (
<Grid.Column width={8}>
<Segment raised>
<Header>
<p style={{ fontSize: '1.2rem' }}>
Church Mutual Worker\'s Compensation Claim
<span style={{ float: 'right' }}>{`Claim #${props.claim.claimNumber}`}</span>
</p>
</Header>
<Form onSubmit={handleSubmit}>
// Here called is Child component
<EditStandaloneClaimDetails
claim={props.claim}
loading={loading}
handleChange={props.handleChange}
/>
</Form>
<Comment currentClaim={props.currentClaim} />
</Segment>
</Grid.Column>
)
ChildComponent:
const EditStandaloneClaimDetails = ({ handleChange, claim, loading, testChange }) => {
if (!claim || loading) {
return null
}
const { noticeOnly, recieveDate, accountNumber } = claim
return (
<Segment
raised
style={{
backgroundColor: '#F0F0F0',
}}
>
<h5>Claim Details</h5>
<Form.Group >
<Form.Field>
// CANNOT ENTER A NEW VALUE FOR DATE INPUT FILED
<label>Date Received</label>
<DateInput
name={'recieveDate'}
placeholder="Date received"
value={recieveDate}
onChange={handleChange}
style={{ width: '65%' }}
dateFormat={'MM/DD/YYYY'}
/>
</Form.Field>
</Form.Group >
Maybe problem is in this attribute value={recieveDate}?
You can handle it using call back function.
In your parent component replace below lines:
handleChange = (e, data) => {
//here you get the updated date
//add your logic
}
// Here called is Child component
<EditStandaloneClaimDetails
recieveDate = {'your date'}
claim={props.claim}
loading={loading}
handleChange={(event, data) =>this.handleChange(event,data)}
/>
In Child component add below function, that function is responsible to call back to parent component.
constructor(props){
super();
this.state = { recieveDate: prop.recieveDate };
}
HandleChange(event,value){
this.setState({ recieveDate})
this.props.handleChange(value,event.uid);
}
<DateInput
name={'recieveDate'}
placeholder="Date received"
value={recieveDate}
onChange={(event, value) =>this.HandleChange(event,data)}
style={{ width: '65%' }}
dateFormat={'MM/DD/YYYY'}
/>
I am playing with React and trying to save the text that user type to the input to the state. I have added to the textarea an onChange attribute for setting the state.
However, when I start typing, I see error in the console stating TypeError: _this.setState is not a function.
I've tried different ways of trying to fix it, but still don't have it.
const NewItemForm = props => (
<Form onSubmit={props.send_form}>
<Form.Group>
<TextArea
placeholder='Name your first item here'
name='item_msg'
onChange={e => this.setState({ item_msg: e.target.value })} />
<Form.Button primary content='Create Item' />
</Form.Group>
</Form>
)
class App extends Component {
constructor () {
super();
this.state = {
item_msg: ''
}
}
handleSubmit(e){
e.preventDefault();
console.log(this.state.item_msg);
}
render() {
return (
<div className="App">
<MainHeaderr />
<Container>
<NewItemForm send_form={this.handleSubmit.bind(this)} />
</Container>
</div>
);
}
}
export default App;
Functional components do not have lifecycle methods and... state :)
const NewItemForm = props => (
<Form onSubmit={props.send_form}>
<Form.Group>
<TextArea
placeholder='Name your first item here'
name='item_msg'
onChange={e => this.setState({ item_msg: e.target.value })} />
<Form.Button primary content='Create Item' />
</Form.Group>
</Form>
)
This won't work:
onChange={e => this.setState({ item_msg: e.target.value })} />
What you need is to pass callback:
const NewItemForm = props => (
<Form onSubmit={props.send_form}>
<Form.Group>
<TextArea
placeholder='Name your first item here'
name='item_msg'
onChange={props.onInputChange} />
<Form.Button primary content='Create Item' />
</Form.Group>
</Form>
)
class App extends Component {
constructor () {
super();
this.state = {
item_msg: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleSubmit(e){
e.preventDefault();
console.log(this.state.item_msg);
}
handleInputChange(e) {
this.setState({ item_msg: e.target.value })
}
render() {
return (
<div className="App">
<MainHeaderr />
<Container>
<NewItemForm send_form={this.handleSubmit} onInputChange={this.handleInputChange} />
</Container>
</div>
);
}
}
I get where you are coming from, but NewItemForm will get transpiled to React Element so this will reference that Element, not the App component.
React without JSX
Functional components are stateless so you can't call setState within them. You can pass a callback from your parent component that sets state in the parent component as follows:
handleChange = e => this.setState({ item_msg: e.target.value });
<NewItemForm onChange={this.handleChange} />
And then in your NewItemForm component:
<TextArea
placeholder='Name your first item here'
name='item_msg'
onChange={props.onChange}
/>
NewItemForm is function component and function comopent does not have lifecycle method use class component.
You need to either use arrow function or bind the function in constructor like below
constructor(props) {
super(props);
this.state = { date: new Date() };
this.tick = this.tick.bind(this);
}
setInterval(()=>this.tick, 1000);
or Use arrow function
setInterval(()=>this.setState({
date: new Date(),
}), 1000);