how to increment by one using react
Clash Royale CLAN TAG#URR8PPP
how to increment by one using react
first time ever asking a question, sorry if I am not posting correctly,
I'm a little confused as to why this will not increment
constructor(props)
super(props);
this.state =
heading: "Deconstruct Topic:",
topics: [
id: 0,
name: "all topics",
node: " all upperlevel"
]
;
handleSubmitTopicDecon = e =>
e.preventDefault();
const topics = this.state.topics.slice();
console.log(topics, "topics");
topics.push(
id: this.state.id + 1,
name: this.state.newName,
node: this.state.newNode
);
console.log(this.state.id, "id");
this.setState( topics );
;
I keep getting id is not a number???
any help is appreciated, thanks in advance
id
this.state
id
this.state.topics[0]
this.state.topics[0].id
You can not change the const value. Use var, or let. also can not see the this.state.id, this.state.newName, this.state.newNode. They are not declared
– peter
Aug 13 at 8:52
thank you for the prompt responses, i'm still not completely understanding, as far as the slice method is concerned i do not believe having const affects anything, i have tried let and var, does not change anything, because i am pushing a new array with index of 1,2,3.. so forth, if index topics[0] has id of 0, i wish for topics[1] to have id of 1 and topics[2] to have index of 2 everytime i invoke the handle submit, that would be my goal
– jeff kang
Aug 13 at 9:45
*sorry pushing a new object not array, ... i am pushing a new object into the array with the slice method
– jeff kang
Aug 13 at 9:55
2 Answers
2
You have defined this.state like this:
this.state
this.state = {
heading: "Deconstruct Topic:",
topics: [
id: 0,
name: "all topics",
node: " all upperlevel"
]
As you can see, there is not id member directly under this.state, only under this.state.topics[0].
id
this.state
this.state.topics[0]
When you access this.state.id you get undefined and then you try to increment it and get the error.
this.state.id
undefined
Go over what you wanted to accomplish here and rewrite your code accordingly.
thank you for your response, i have tried to update id: this.state.topics.id + 1, in my handleSubmitTopicDecon method... this does not help, what i am currently doing with my component , that i am not fully showing, is that in my render section, i have the handlesubmitTopicDecon method connected to a button, so that a new object gets pushed each time the button is clicked and then i have a map function to render each object, in a separate component. my goal would be to have topics[0] to have an id of 0, topics[1] to have an id of 1 topics[2] to have an id of two and so forth.
– jeff kang
Aug 13 at 9:50
``` handleSubmitTopicDecon = e => e.preventDefault(); let topics = this.state.topics.slice(); console.log(topics, "topics"); topics.push( id: this.state.topics.id + 1, name: this.state.newName, node: this.state.newNode ); console.log(this.state.id, "id"); this.setState( topics ); ;```
– jeff kang
Aug 13 at 9:51
render() { return ( <div> <h1>This page is for deconstructing a topic of choice</h1> <h2>this.state.heading </h2> <Topics topics=this.state.topics /> .... <button onClick=this.handleSubmitTopicDecon>Add Topic</button>
– jeff kang
Aug 13 at 9:52
const Topics = props => console.log(props.topics, "props"); return ( <div> props.topics.map(topics => return <Topic key=topics.id topics=topics />; ) </div> ); ; export default Topics;
– jeff kang
Aug 13 at 9:53
when i go into my browser web tools console: i get the following:
– jeff kang
Aug 13 at 10:00
You have declared topics variable as const.You cannot change const variables after they are declared. Change it to this code and try it once again:
var topics = this.state.topics.slice();
that's not true for objects and arrays
– mwl
Aug 13 at 9:03
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Because You haven't defined an
iditem inthis.statewhat you have is anidelement insidethis.state.topics[0](ie,this.state.topics[0].id)– Anandhu
Aug 13 at 8:29