州の複数の配列からの反応小道具

Question

反応成分の状態に含まれる2つの配列から小道具を渡そうとしています。 1つの配列はユーザ​​ーによって生成され、もう1つは既に組み込まれています。これは私がまだReactには新しく、正しく小道具を渡す方法がわからないので、私の頭の中に少しあります。

ここにはコンポーネントにエラーはありません。それを行う方法はわかりません。

私はあなたが（完璧に動作します）questionsその後、hintsが表示されますの下に任意のヘルプは大幅にthis.stateで

メインコンポーネント

をいただければ幸い、私が探しているものを下に説明します。質問は正しくマップされますが、それに沿ってマップするヒントを追加しようとすると、すべてのヒントが順番にではなく一度に返されます。私はちょうど(questions, hints)を追加しようとしましたが、正しく返されません。

export default class AutoFocusText extends Component { 
    constructor() { 
    super(); 

    this.state = { 
     active: 0, 
     questions: [ 
     '1. Enter A Proper Noun', 
     '2. Enter A Location', 
     '3. Enter A Proper Noun that Describes Evil', 
     '4. Describe Something Menacing', 
     '5. Describe a fortified area', 
     "6. A Woman's Name", 
     '7. Describe a large area of mass' 
     ], 
     hints: [ 
     "Hint: Use words like Rebel, Hell's Angels", 
     'Hint: Use a word such as Base, Bunker, Foxhole, Bedroom', 
     'Hint: Use words like Empire, Ottoman, Mongols', 
     'Hint: Freeze Ray, Leftover Fruitcake', 
     'Hint: Castle, Bunker, Planet', 
     'Hint: Astrid, Diana, Mononoke, Peach', 
     'Hint: Use words such as Galaxy, Planet, Wal Mart' 
     ], 
     answers: [] 
    }; 

私は、私がどのようにちょうどわからないよ、それは答えの配列をマッピングしています知っている回答のユーザーの入力を取り、それがproperName1={this.state.value1}などというように、別のコンポーネントに小道具として一緒に渡さしたいのですがこれをする。

以下は、その他の主要コンポーネントです。

this.submitHandler = this.submitHandler.bind(this); 
    this.renderQuestion = this.renderQuestion.bind(this); 
    this.onChange = this.onChange.bind(this); 
    } 

    renderQuestion() { 
    const { questions, hints, active, value } = this.state; 

    if (active >= questions.length) 
     return <Crawler style={{ width: '500px', position: 'absolute' }} />; 

    return questions.filter((quest, index) => index === active).map(quest => (// get next question // map over selected question, the key prop allows react to 
     <FormElement 
     key={active} 
     text={quest} 
     hint={hints} 
     value={value} 
     onChange={this.onChange} 
     /> 
    )); 
    } 

    onChange(e) { 
    this.setState({ value: e.target.value }); 
    } 

    submitHandler(e) { 
    e.preventDefault(); 

    const answers = [...this.state.answers, this.state.value]; //push new value to answsers array without mutation 
    const value = ''; // clear input 
    const active = this.state.active + 1; // index pointer 

    this.setState({ answers, value, active }); 
    } 

    render() { 
    return (
     <MainContainer> 

     <DivStyle> 
      {/* Form Wrapper */} 
      <form onSubmit={this.submitHandler}> 
      {this.renderQuestion()} 
      <SubmitButton type="submit">Submit</SubmitButton> 
      </form> 
      <ul> 
      {this.state.answers.map((ans, index) => { 
       return (
       <li key={index}> 
        {ans} 
       </li> 
      ); 
      })} 
      </ul> 
     </DivStyle> 
     </MainContainer> 
    ); 
    } 
} 

子コンポーネント1 これは（私もヒントを配置したい場所をして）現時点で

class FormElement extends Component { 
    constructor() { 
    super(); 
    } 

    componentDidMount() { 
    //focus text input upon mounting component 
    this.textInput.focus(); 
    } 

    render() { 
    const { text, hint, value, onChange } = this.props; 

    return (
     <div> 
     <InputQuestion> 
      {text} 
      {hint} 
     </InputQuestion> 
     <input 
      className="inputstyling" 
      ref={el => { 
      this.textInput = el; 
      }} 
      onChange={onChange} 
      type="text" 
      value={value} 
     /> 
     </div> 
    ); 
    } 
} 

export default FormElement; 

を生成した質問は、「ヒント」は、すべてにもたらすダムコンポーネントです一度に1つではなく、順番にヒント。

子コンポーネント2

最後に合格するために必要な小道具は、こちらを参照してください。私は小道具を渡されたことがないように、アレイは

class Crawler extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     properName1: 'Rebel', 
     noun1: 'frog', 
     properName2: 'Empire', 
     properName3: 'DEATH STAR', 
     noun2: 'station', 
     noun3: 'planet', 
     personsName1: 'Leia', 
     noun4: 'starship', 
     pluralnoun1: 'people', 
     noun5: 'galaxy' 
    }; 
    } 
    render() { 
    return (
     <ContainLeft style={{ padding: 0 }}> 

     <CrawlHolder> 
      <div class="fade" /> 
      <section className="star-wars"> 

      <div className="crawl"> 

       <div className="title"> 
       <p>Episode IV</p> 
       <h1>A New Hope</h1> 
       </div> 

       <p> 
       It is a period of civil war. 
       {' '} 
       {this.props.properName1} 
       {' '} 
       spaceships, striking from a hidden 
       {' '} 
       {this.props.noun1} 
       , have won their first victory against the evil Galactic 
       {' '} 
       {this.props.properName2} 
       . 
       </p> 
       <p> 
       During the battle, 
       {' '} 
       {this.props.properName1} 
       {' '} 
       spies managed to steal secret plans to the 
       {' '} 
       {this.props.properName2} 
       's ultimate weapon, the 
       {' '} 
       {this.props.properName3} 
       , an armored 
       {' '} 
       {this.props.noun2} 
       {' '} 
       with enough power to destroy an entire planet. 
       </p> 
       <p> 
       Pursued by the Empire’s sinister agents, Princess 
       {' '} 
       {this.props.personsName1} 
       {' '} 
       races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the 
       {' '} 
       {this.props.noun3} 
       … 
       </p> 

      </div> 

      </section> 
     </CrawlHolder> 
     </ContainLeft> 
    ); 
    } 
} 
export default Crawler; 

はあなたの助けをありがとう配列を経由して私を投げている

mapでの機能は、オプションの第二のparam、現在の要素のインデックスを持っている

Answer 1

あなたができるよう操作を行います。

return questions.filter((quest, index) => index === active).map((quest,i) => (
     <FormElement 
     key={active} 
     text={quest} 
     hint={hints[i]} 
     value={value} 
     onChange={this.onChange} 
     /> 
    )); 

編集：私はあなたがそうmapは私が考える必要はありません一度に一つの質問をレンダリングしている今見

。あなたは現在の質問（active）のインデックスを持っているので、私はあなただけ

return (
    <FormElement 
     text={questions[active]} 
     hint={hints[active]} 
     value={value} 
     onChange={this.onChange} 
    /> 
)