Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ol>
- <li>Create TWO new components: UserInput and UserOutput</li>
- <li>UserInput should hold an input element, UserOutput two paragraphs</li>
- <li>Output multiple UserOutput components in the App component (any paragraph texts of your choice)</li>
- <li>Pass a username (of your choice) to UserOutput via props and display it there</li>
- <li>Add state to the App component (=> the username) and pass the username to the UserOutput component</li>
- <li>Add a method to manipulate the state (=> an event-handler method)</li>
- <li>Pass the event-handler method reference to the UserInput component and bind it to the input-change event</li>
- <li>Ensure that the new input entered by the user overwrites the old username passed to UserOutput</li>
- <li>Add two-way-binding to your input (in UserInput) to also display the starting username</li>
- <li>Add styling of your choice to your components/ elements in the components - both with inline styles and stylesheets</li>
- </ol>
- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@
- App.js:
- import React, {Component} from 'react';
- import './App.css';
- import UserInput from './UserInput/UserInput';
- import UserOutput from './UserOutput/UserOutput';
- class App extends Component {
- state = {
- username: 'default'
- }
- inputChangedHandler = (event) => {
- this.setState({
- username: event.target.value
- })
- }
- render() {
- return (
- <div>
- <UserInput inputChange={this.inputChangedHandler} name={this.state.username}/>
- <UserOutput username={this.state.username}/>
- <UserOutput username={this.state.username}/>
- <UserOutput username={'hardcoded username'}/>
- </div>
- )
- }
- }
- export default App;
- @@@@@@@@@@@@@@@@@@@@@@@@@@@
- UserInput.js:
- import React from 'react';
- const UserInput = (props) => {
- return (
- <input type="text" onChange={props.inputChange} value={props.name}/>
- )
- }
- export default UserInput;
- @@@@@@@@@@@@@@@@@@@@@@@@@@@
- UserOutput.js:
- import React from 'react';
- const UserOutput = (props) => {
- return (
- <p>Username: {props.username}</p>
- )
- }
- export default UserOutput;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement