Mixing
React form is not working properly (props problem (?))
2
I've got a task to create the following project:
Everything renders good but the problem is that none of the components is working:
Cannot fill First Name and Last Name;
Select from the list is not working;
Cannot check any of the options from checklist;
When press "Submit" button - everything disappears.
It seems like I'm passing wrong values to functional components (?)
Can you explain me my mistakes so I can fix them?
Here is a link to my CodePen
The entire code:
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities component
function SelectList(props){
return (
<div>
<label>{props.label}</label>
<br/>
<select value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
return (
<tbody>
{props.reportElem.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.chacked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
let itemsCopy = this.state.items
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>, document.getElementById('root')
)
javascript reactjs
asked Jan 2 at 8:20
JohnJohn
678
add a comment |
2
I've got a task to create the following project:
Everything renders good but the problem is that none of the components is working:
Cannot fill First Name and Last Name;
Select from the list is not working;
Cannot check any of the options from checklist;
When press "Submit" button - everything disappears.
It seems like I'm passing wrong values to functional components (?)
Can you explain me my mistakes so I can fix them?
Here is a link to my CodePen
The entire code:
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities component
function SelectList(props){
return (
<div>
<label>{props.label}</label>
<br/>
<select value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
return (
<tbody>
{props.reportElem.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.chacked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
let itemsCopy = this.state.items
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>, document.getElementById('root')
)
javascript reactjs
asked Jan 2 at 8:20
JohnJohn
678
add a comment |
2
2
2
I've got a task to create the following project:
Everything renders good but the problem is that none of the components is working:
Cannot fill First Name and Last Name;
Select from the list is not working;
Cannot check any of the options from checklist;
When press "Submit" button - everything disappears.
It seems like I'm passing wrong values to functional components (?)
Can you explain me my mistakes so I can fix them?
Here is a link to my CodePen
The entire code:
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities component
function SelectList(props){
return (
<div>
<label>{props.label}</label>
<br/>
<select value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
return (
<tbody>
{props.reportElem.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.chacked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
let itemsCopy = this.state.items
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>, document.getElementById('root')
)
javascript reactjs
asked Jan 2 at 8:20
JohnJohn
678
I've got a task to create the following project:
Everything renders good but the problem is that none of the components is working:
Cannot fill First Name and Last Name;
Select from the list is not working;
Cannot check any of the options from checklist;
When press "Submit" button - everything disappears.
It seems like I'm passing wrong values to functional components (?)
Can you explain me my mistakes so I can fix them?
Here is a link to my CodePen
The entire code:
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities component
function SelectList(props){
return (
<div>
<label>{props.label}</label>
<br/>
<select value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
return (
<tbody>
{props.reportElem.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.chacked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
let itemsCopy = this.state.items
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>, document.getElementById('root')
)
javascript reactjs
javascript reactjs
asked Jan 2 at 8:20
JohnJohn
678
asked Jan 2 at 8:20
JohnJohn
678
asked Jan 2 at 8:20
JohnJohn
678
asked Jan 2 at 8:20
JohnJohn
678
asked Jan 2 at 8:20
JohnJohn
678
678
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
you need to take care of few things here
1) this.setState({[event.target.name]: event.target.value}) here you are expecting the target.name but your input has no name, so no state is updated
2) you need to pass the name to your component
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
and in your component
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
So, this way you can have the name you want to pass from the state
3) your check list contains the same id
[{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
change it to
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
4) in your report elem you need to have props.reportList not props.reportElem
once you apply this changes your code will look like this
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities componnt
function SelectList(props) {
return (
<div>
<label>{props.label}</label>
<br/>
<select name={props.name} value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
debugger;
return (
<tbody>
{props.reportList.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.checked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
debugger;
let itemsCopy = JSON.parse(JSON.stringify(this.state.items))
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
console.log(this.state);
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} name="lastName" handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' name="activity" optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} name="apply" checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>,
document.getElementById('root')
)
Demo
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
Thank you so much! You've perfectly explained the mistakes I've made in my project! Just one more question: Could you take a look at my "Delete" button? Should I create an additional component that will be responsible for the removing elements from the list?
– John
Jan 2 at 9:05
@John it has to do with the props you are passing you need to make sure you are passing correct props into removing elements function.
– Just code
Jan 2 at 9:06
Could you please check my code? I've added a remove item function to my code: codepen.io/leocete/pen/xmrgox?editors=0011
– John
Jan 2 at 11:33
@John what you want?
– Just code
Jan 2 at 11:34
1
@John check this codepen.io/dholakiyaankit/pen/mapwxQ?editors=0011
– Just code
Jan 2 at 11:56
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003192%2freact-form-is-not-working-properly-props-problem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
you need to take care of few things here
1) this.setState({[event.target.name]: event.target.value}) here you are expecting the target.name but your input has no name, so no state is updated
2) you need to pass the name to your component
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
and in your component
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
So, this way you can have the name you want to pass from the state
3) your check list contains the same id
[{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
change it to
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
4) in your report elem you need to have props.reportList not props.reportElem
once you apply this changes your code will look like this
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities componnt
function SelectList(props) {
return (
<div>
<label>{props.label}</label>
<br/>
<select name={props.name} value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
debugger;
return (
<tbody>
{props.reportList.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.checked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
debugger;
let itemsCopy = JSON.parse(JSON.stringify(this.state.items))
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
console.log(this.state);
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} name="lastName" handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' name="activity" optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} name="apply" checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>,
document.getElementById('root')
)
Demo
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
Thank you so much! You've perfectly explained the mistakes I've made in my project! Just one more question: Could you take a look at my "Delete" button? Should I create an additional component that will be responsible for the removing elements from the list?
– John
Jan 2 at 9:05
@John it has to do with the props you are passing you need to make sure you are passing correct props into removing elements function.
– Just code
Jan 2 at 9:06
Could you please check my code? I've added a remove item function to my code: codepen.io/leocete/pen/xmrgox?editors=0011
– John
Jan 2 at 11:33
@John what you want?
– Just code
Jan 2 at 11:34
1
@John check this codepen.io/dholakiyaankit/pen/mapwxQ?editors=0011
– Just code
Jan 2 at 11:56
add a comment |
1
you need to take care of few things here
1) this.setState({[event.target.name]: event.target.value}) here you are expecting the target.name but your input has no name, so no state is updated
2) you need to pass the name to your component
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
and in your component
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
So, this way you can have the name you want to pass from the state
3) your check list contains the same id
[{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
change it to
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
4) in your report elem you need to have props.reportList not props.reportElem
once you apply this changes your code will look like this
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities componnt
function SelectList(props) {
return (
<div>
<label>{props.label}</label>
<br/>
<select name={props.name} value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
debugger;
return (
<tbody>
{props.reportList.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.checked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
debugger;
let itemsCopy = JSON.parse(JSON.stringify(this.state.items))
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
console.log(this.state);
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} name="lastName" handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' name="activity" optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} name="apply" checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>,
document.getElementById('root')
)
Demo
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
Thank you so much! You've perfectly explained the mistakes I've made in my project! Just one more question: Could you take a look at my "Delete" button? Should I create an additional component that will be responsible for the removing elements from the list?
– John
Jan 2 at 9:05
@John it has to do with the props you are passing you need to make sure you are passing correct props into removing elements function.
– Just code
Jan 2 at 9:06
Could you please check my code? I've added a remove item function to my code: codepen.io/leocete/pen/xmrgox?editors=0011
– John
Jan 2 at 11:33
@John what you want?
– Just code
Jan 2 at 11:34
1
@John check this codepen.io/dholakiyaankit/pen/mapwxQ?editors=0011
– Just code
Jan 2 at 11:56
add a comment |
1
1
1
you need to take care of few things here
1) this.setState({[event.target.name]: event.target.value}) here you are expecting the target.name but your input has no name, so no state is updated
2) you need to pass the name to your component
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
and in your component
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
So, this way you can have the name you want to pass from the state
3) your check list contains the same id
[{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
change it to
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
4) in your report elem you need to have props.reportList not props.reportElem
once you apply this changes your code will look like this
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities componnt
function SelectList(props) {
return (
<div>
<label>{props.label}</label>
<br/>
<select name={props.name} value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
debugger;
return (
<tbody>
{props.reportList.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.checked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
debugger;
let itemsCopy = JSON.parse(JSON.stringify(this.state.items))
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
console.log(this.state);
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} name="lastName" handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' name="activity" optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} name="apply" checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>,
document.getElementById('root')
)
Demo
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
you need to take care of few things here
1) this.setState({[event.target.name]: event.target.value}) here you are expecting the target.name but your input has no name, so no state is updated
2) you need to pass the name to your component
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
and in your component
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
So, this way you can have the name you want to pass from the state
3) your check list contains the same id
[{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'b', text:'Medical Needs'}]
change it to
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
4) in your report elem you need to have props.reportList not props.reportElem
once you apply this changes your code will look like this
// Lists of activities and restrictions
const optionsList = ['Science Lab','Swimming','Cooking','Painting'];
const checkList = [{id: 'a', text:'Dietary Restrictions'},
{id: 'b', text:'Physical Disabilities'},
{id: 'c', text:'Medical Needs'}]
// First Name and LastName component
function NameInput(props){
return (
<div>
<label>{props.label}</label>
<br/>
<input type ='text' name={props.name} value={props.value} onChange={props.handleChange} />
</div>
)
}
// List of activities componnt
function SelectList(props) {
return (
<div>
<label>{props.label}</label>
<br/>
<select name={props.name} value={props.value} onChange={props.handleChange}>
{props.optionsList.map( (item, index) =>
<option key={index} value = {item}> {item} </option>)}
</select>
</div>
)
}
// CheckBox list component
function CheckBox(props){
return (
<p>
<label>{props.value}) {props.label}</label>
<input type="checkbox" name={props.name} id={props.id} value={props.value} checked={props.checked} onChange={props.handleChange} />
</p>
)
}
// CheckbBoxList component
function CheckBoxList(props){
return (
<div>
<label>{props.title}</label>
<ol>
{props.checkList.map((item,index) =>
<CheckBox
key = {index}
id = {props.id+'_'+index}
name = {props.id}
value = {item.id}
checked = {(props.applyList.indexOf(item.id) < 0 ? false : true)}
label = {item.text}
handleChange = {props.handleChange}
/>)
}
</ol>
</div>
)
}
// Remove button component
function RemoveButton(props){
return (
<button onClick= {() => props.handleClick()}>x</button>
)
}
// Report element
function ReportElem(props){
debugger;
return (
<tbody>
{props.reportList.map((item, index) =>
<tr key={index}>
<td><RemoveButton /></td>
<td>{item.firstName}</td>
<td>{item.lastName}</td>
<td>{item.activity}</td>
<td>{item.apply}</td>
</tr>
)}
</tbody>
)
}
// Report table
function ReportTable(props){
return (
<table>
<thead>
<tr>
<th>Remove</th>
<th>First Name</th>
<th>Last Name</th>
<th>Activity</th>
<th>Restrictions</th>
</tr>
</thead>
<ReportElem reportList = {props.reportList} />
</table>
)
}
class App extends React.Component{
constructor(props){
super(props)
this.state = {
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items:
}
}
// Handle multiple inputs
handleChange(event){
this.setState({[event.target.name]: event.target.value})
}
// Handle CheckList changes
handleChangeChk(event){
let itemsCopy = this.state.apply
if (event.target.checked){
itemsCopy.push(event.target.value)
} else {
console.log(itemsCopy.indexOf(event.target.value))
itemsCopy.splice(itemsCopy.indexOf(event.target.value), 1)
}
this.setState({apply: itemsCopy})
}
// Add new item to the report and refresh the initial state
addItem(){
debugger;
let itemsCopy = JSON.parse(JSON.stringify(this.state.items))
itemsCopy.push({
firstName: this.state.firstName,
lastName: this.state.lastName,
activity: this.state.activity,
apply: this.state.apply.join(',')
})
this.setState({
firstName: '',
lastName: '',
activity: this.props.optionsList[0],
apply: ,
items: itemsCopy
})
}
render(){
console.log(this.state);
return (
<div>
<NameInput label = 'First Name' value = {this.state.firstName} name="firstName" handleChange = {this.handleChange.bind(this)} />
<NameInput label = 'Last Name' value = {this.state.lastName} name="lastName" handleChange = {this.handleChange.bind(this)} />
<SelectList label = 'Select Activity' name="activity" optionsList={this.props.optionsList} value = {this.state.activity} handleChange = {this.handleChange.bind(this)} />
<CheckBoxList title = {'Check all that apply'} name="apply" checkList={this.props.checkList} applyList = {this.state.apply} handleChange = {this.handleChangeChk.bind(this)} />
<button className = 'submit' onClick = {() => this.addItem()}>Submit</button>
{this.state.items.length > 0 && <ReportTable reportList = {this.state.items} />}
</div>
)
}
}
ReactDOM.render(
<App optionsList={optionsList} checkList={checkList}/>,
document.getElementById('root')
)
Demo
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
answered Jan 2 at 8:39
Just codeJust code
10.5k53267
10.5k53267
Thank you so much! You've perfectly explained the mistakes I've made in my project! Just one more question: Could you take a look at my "Delete" button? Should I create an additional component that will be responsible for the removing elements from the list?
– John
Jan 2 at 9:05
@John it has to do with the props you are passing you need to make sure you are passing correct props into removing elements function.
– Just code
Jan 2 at 9:06
Could you please check my code? I've added a remove item function to my code: codepen.io/leocete/pen/xmrgox?editors=0011
– John
Jan 2 at 11:33
@John what you want?
– Just code
Jan 2 at 11:34
1
@John check this codepen.io/dholakiyaankit/pen/mapwxQ?editors=0011
– Just code
Jan 2 at 11:56
add a comment |
Thank you so much! You've perfectly explained the mistakes I've made in my project! Just one more question: Could you take a look at my "Delete" button? Should I create an additional component that will be responsible for the removing elements from the list?
– John
Jan 2 at 9:05
@John it has to do with the props you are passing you need to make sure you are passing correct props into removing elements function.
– Just code
Jan 2 at 9:06
Could you please check my code? I've added a remove item function to my code: codepen.io/leocete/pen/xmrgox?editors=0011
– John
Jan 2 at 11:33
@John what you want?
– Just code
Jan 2 at 11:34
1
@John check this codepen.io/dholakiyaankit/pen/mapwxQ?editors=0011
– Just code
Jan 2 at 11:56
Thank you so much! You've perfectly explained the mistakes I've made in my project! Just one more question: Could you take a look at my "Delete" button? Should I create an additional component that will be responsible for the removing elements from the list?
– John
Jan 2 at 9:05
Thank you so much! You've perfectly explained the mistakes I've made in my project! Just one more question: Could you take a look at my "Delete" button? Should I create an additional component that will be responsible for the removing elements from the list?
– John
Jan 2 at 9:05
@John it has to do with the props you are passing you need to make sure you are passing correct props into removing elements function.
– Just code
Jan 2 at 9:06
@John it has to do with the props you are passing you need to make sure you are passing correct props into removing elements function.
– Just code
Jan 2 at 9:06
Could you please check my code? I've added a remove item function to my code: codepen.io/leocete/pen/xmrgox?editors=0011
– John
Jan 2 at 11:33
Could you please check my code? I've added a remove item function to my code: codepen.io/leocete/pen/xmrgox?editors=0011
– John
Jan 2 at 11:33
@John what you want?
– Just code
Jan 2 at 11:34
@John what you want?
– Just code
Jan 2 at 11:34
1
1
@John check this codepen.io/dholakiyaankit/pen/mapwxQ?editors=0011
– Just code
Jan 2 at 11:56
@John check this codepen.io/dholakiyaankit/pen/mapwxQ?editors=0011
– Just code
Jan 2 at 11:56
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003192%2freact-form-is-not-working-properly-props-problem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
