Created
April 2, 2018 18:42
-
-
Save adsurov/daeafd2d71eea091fd723c6002aca031 to your computer and use it in GitHub Desktop.
lists-conditionals--assignment-problem
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import './App.css'; | |
| import ValidationComponent from './ValidationComponent/ValidationComponent'; | |
| import CharComponent from './CharComponent/CharComponent'; | |
| class App extends Component { | |
| state = { | |
| inputLength: null, | |
| inputValue: '' | |
| }; | |
| deleteCharHandler = index => { | |
| const chars = [...this.state.charsList]; | |
| chars.splice(index, 1); | |
| const newValue = chars.join(''); | |
| this.setState({ | |
| charsList: chars, | |
| inputValue: newValue, | |
| inputLength: newValue.length | |
| }); | |
| }; | |
| changeInputHandler = event => { | |
| const charsList = event.target.value.split(''); | |
| this.setState({ | |
| inputLength: event.target.value.length, | |
| charsList: charsList, | |
| inputValue: event.target.value | |
| }); | |
| }; | |
| render() { | |
| const style = { | |
| textDecoration: 'line-through' | |
| }; | |
| let chars = null; | |
| if (this.state.charsList) { | |
| chars = ( | |
| <div> | |
| {this.state.charsList.map((char, index) => { | |
| return ( | |
| <CharComponent | |
| key={index} | |
| letter={char} | |
| click={() => this.deleteCharHandler(index)} | |
| /> | |
| ); | |
| })} | |
| </div> | |
| ); | |
| } | |
| return ( | |
| <div className="App"> | |
| <ol> | |
| <li style={style}> | |
| Create an input field (in App component) with a change listener | |
| which outputs the length of the entered text below it (e.g. in a | |
| paragraph). | |
| </li> | |
| <li style={style}> | |
| Create a new component (=> ValidationComponent) which receives the | |
| text length as a prop | |
| </li> | |
| <li style={style}> | |
| Inside the ValidationComponent, either output "Text too short" or | |
| "Text long enough" depending on the text length (e.g. take 5 as a | |
| minimum length) | |
| </li> | |
| <li style={style}> | |
| Create another component (=> CharComponent) and style it as an | |
| inline box (=> display: inline-block, padding: 16px, text-align: | |
| center, margin: 16px, border: 1px solid black). | |
| </li> | |
| <li style={style}> | |
| Render a list of CharComponents where each CharComponent receives a | |
| different letter of the entered text (in the initial input field) as | |
| a prop. | |
| </li> | |
| <li style={style}> | |
| When you click a CharComponent, it should be removed from the | |
| entered text. | |
| </li> | |
| </ol> | |
| <p>Hint: Keep in mind that JavaScript strings are basically arrays!</p> | |
| <div> | |
| <input | |
| type="text" | |
| value={this.state.inputValue} | |
| onChange={event => this.changeInputHandler(event)} | |
| /> | |
| <p>Input text length is: {this.state.inputLength}</p> | |
| </div> | |
| <ValidationComponent length={this.state.inputLength} /> | |
| <hr /> | |
| {chars} | |
| </div> | |
| ); | |
| } | |
| } | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import './CharComponent.css'; | |
| const CharComponent = props => { | |
| return ( | |
| <div className="Char" onClick={props.click}> | |
| <span> {props.letter}</span> | |
| </div> | |
| ); | |
| }; | |
| export default CharComponent; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| const ValidationComponent = props => { | |
| let advice = null; | |
| if (props.length < 5) { | |
| advice = 'Text too short'; | |
| } else if (props.length > 16) { | |
| advice = 'Text long enough'; | |
| } else { | |
| advice = 'Okay'; | |
| } | |
| return ( | |
| <div> | |
| <p>And a word is ...{advice}</p> | |
| </div> | |
| ); | |
| }; | |
| export default ValidationComponent; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment