Skip to content

Instantly share code, notes, and snippets.

@casdidier
Last active May 17, 2020 09:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save casdidier/d6bc8c3d395d447091517ff755b7af8b to your computer and use it in GitHub Desktop.
Save casdidier/d6bc8c3d395d447091517ff755b7af8b to your computer and use it in GitHub Desktop.
State is undefined : TypeError: Cannot read property 'nombre_de_lits' of undefined
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import RoomForm from '../../hooks/RoomHooks';
import RoomServiceApi from './RoomServiceApi';
const RoomUpdate = ({ update, formName, saveButton, roomId, children }) => {
const { inputs, setInputs } = useState({
nombre_de_lits: '',
logement: 'Bengalow',
lit_simple: '',
lit_double: ''
});
console.log(inputs); // undefined
const handleInputChange = (event) => {
event.persist();
setInputs(() => ({
...inputs,
[event.target.name]: event.target.value
}));
};
const handleSubmit = (event) => {
if (event && event.target && event.target.name === 'MODAL_FORM')
event.preventDefault();
update(inputs);
};
// useEffect(
// () =>
// RoomServiceApi.getRoomInfoApi(roomId).then((data) => {
// const { nombre_de_lits, logement, lit_simple, lit_double } = data;
// setInputs({
// // inputs.logement = logement
// // inputs.lit_simple = lit_simple
// // inputs.lit_double = lit_double
// // inputs.nombre_de_lits = nombre_de_lits
// logement,
// lit_simple,
// lit_double,
// nombre_de_lits
// });
// }),
// []
// );
return (
<div className="section is-fullheight">
<h2>ROOM</h2>
<div className="container">
<div className="column is-4 is-offset-4">
<div className="box">
<form onSubmit={handleSubmit} autoComplete="off" name={formName}>
<div className="field">
<label className="label has-text-centered">
Nombre de couchages
</label>
<div className="control">
<input
className="input"
type="number"
name="nombre_de_lits"
onChange={handleInputChange}
value={inputs.nombre_de_lits}
required
/>
</div>
</div>
<div className="field">
<label className="label has-text-centered">
Type de logement
</label>
<div className="control">
<input
className="input"
type="text"
name="logement"
onChange={handleInputChange}
value={inputs.logement}
required
/>
</div>
</div>
<div className="field">
<label className="label has-text-centered">
Nombre de lits simples
</label>
<div className="control">
<input
className="input"
type="number"
name="lit_simple"
onChange={handleInputChange}
value={inputs.lit_simple}
required
/>
</div>
</div>
<div className="field">
<label className="label has-text-centered">
Nombre de lits double
</label>
<div className="control">
<input
className="input"
type="number"
name="lit_double"
onChange={handleInputChange}
value={inputs.lit_double}
required
/>
</div>
</div>
<button
className="button is-block is-fullwidth is-success"
type="submit"
style={saveButton}
>
Créer le logement
</button>
{children}
</form>
</div>
</div>
</div>
</div>
);
};
const mapStateToProps = (state, ownProps) => {
return {};
};
const mapDispatchToProps = (dispatch, ownProps) => {
const url = 'http://localhost:8000/room/update';
return {
updateRoom: (inputs) => {
const data = { ...inputs };
fetch(url, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then((response) => response.json())
.then((jsonResponse) => {
if (ownProps.displayModal2) ownProps.displayModal2();
return jsonResponse;
})
.then((data) => {
dispatch({ type: 'UPDATE_ROOM', data });
})
.catch((error) => {
console.error('Error:', error);
});
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(RoomUpdate);
@casdidier
Copy link
Author

TypeError: Cannot read property 'nombre_de_lits' of undefined
RoomUpdate
D:/mada-hotel-app/client/src/components/Room/RoomUpdate.js:65
62 | type="number"
63 | name="nombre_de_lits"
64 | onChange={handleInputChange}

65 | value={inputs.nombre_de_lits}
| ^ 66 | required
67 | />
68 |

@casdidier
Copy link
Author

const { inputs, setInputs } = useState({ ==> wrong syntax , should be [ ]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment