taniarascia / react-tutorial Goto Github PK
View Code? Open in Web Editor NEWA walkthrough of basic React concepts.
Home Page: https://taniarascia.github.io/react-tutorial/
A walkthrough of basic React concepts.
Home Page: https://taniarascia.github.io/react-tutorial/
In my App.js I have the method to handle adding a new user (with name and job fields)
addCharacter = (name, job) => {
this.setState(
{
characters: [...this.state.characters, {name, job}]
}
);
}
And I use the functional Form component :
const Form = (props) => {
return (
<form>
<input name='name' />
<input name='job' />
<button type='button' onClick={() => {
props.addCharacter(
// use any preferred approach to reference the value in need
document.forms[0].elements.name.value,
document.forms[0].elements.job.value
)
}}>
Add
</button>
</form>
)
}
Since your source code is drastically different ( it has a bit more lines and it's kind of hard to easily comprehend for me yet), can you point disadvantages of the way I approached it ( if any ) ?
Hello - its a useful tutorial but the HTML generated by Jekyll has multiple errors and warnings with unclosed and unmatched elements.
The output from the generated site can be checked here https://validator.w3.org/nu/?doc=http%3A%2F%2Ftaniarascia.github.io%2Fstartjekyll%2Fabout%2F
Thanks
I get this error when adding the removeCharacter method to the App component and I can't figure out what's wrong, please help.
./src/App.js
Line 39:31: 'characters' is not defined no-undef
Search for the keywords to learn more about each error.
class App extends Component {
state = {
characters: [
{
name: 'Charlie',
job: 'Janitor'
},
{
name: 'Mac',
job: 'Bouncer'
},
{
name: 'Dee',
job: 'Aspiring actress'
},
{
name: 'Dennis',
job: 'Bartender'
}
]
}
removeCharacter = (index) => {
const {characters} = this.state
this.setState({
characters: characters.filter((character, i) => {
return i !== index
}),
})
}
render () {
return (
<div className='container'>
<Table characterData={characters} removeCharacter={this.removeCharacter} />
</div>
)
}
}
see attached screenshot.
Thank you for sharing.
I've started learning React from blog, and while it's extremely well written, but i did face one issue.
In State section, you used the following code
where as, it should have been
<div className="container"> <Table characterData={this.state.characters} removeCharacter={this.removeCharacter} /> </div>
Otherwise, "characters" isn't recognized by our "Table" element.
React might have been updated since then, due to which this error/issue is coming now.
So, basically, the blog does mention that we need to add
"const { characters } = this.state
". This line kept skipping me eyes.
You have answered What is React? But Why should I adopt React? Why was it invented? What problem does it solve? This will be useful info. Thx
TypeError: props.removecharacter is not a function
onClick
C:/Users/naveen raj rk/Desktop/new2/mydemoapp/src/Table.js:22
19 | {row.name}
20 | {row.job}
21 |
22 | <Button onClick={()=>props.removecharacter(index)}>Delete
| ^ 23 |
24 |
25 | );
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.