text: import React from 'react'
  import PropTypes from 'prop-types'
  import styles from './ReEnterSeed.scss'
  
  class ReEnterSeed extends React.Component {
    componentWillMount() {
      this.props.setReEnterSeedIndexes()
    }
  
    render() {
      const { seed, reEnterSeedInput, updateReEnterSeedInput, seedIndexesArr } = this.props
  
      return (
        <div className={styles.container}>
          <ul className={styles.seedContainer}>
            {seedIndexesArr.map(index => (
              <li key={index}>
                <section>
                  <label htmlFor={index}>{index}</label>
                </section>
                <section>
                  <input
                    type="text"
                    id={index}
                    value={reEnterSeedInput[index] ? reEnterSeedInput[index] : ''}
                    onChange={event => updateReEnterSeedInput({ word: event.target.value, index })}
                    className={`${styles.word} ${
                      reEnterSeedInput[index] && seed[index - 1] === reEnterSeedInput[index]
                        ? styles.valid
                        : styles.invalid
                    }`}
                  />
                </section>
              </li>
            ))}
          </ul>
        </div>
      )
    }
  }
  
  ReEnterSeed.propTypes = {
    seed: PropTypes.array.isRequired,
    reEnterSeedInput: PropTypes.object.isRequired,
    updateReEnterSeedInput: PropTypes.func.isRequired,
    setReEnterSeedIndexes: PropTypes.func.isRequired,
    seedIndexesArr: PropTypes.array.isRequired
  }
  
  export default ReEnterSeed
  