Почему моя форма React bootstrap не отображает значения, переданные атрибутам?

Question

Я использую React 16.12.0. Я хочу использовать bootstrap (v 4.4.0) для создания элементов формы и стилей. Я создал этот компонент контейнера формы, src / Containers / FormContainer.jsx:

import React, {Component} from 'react';
import {FormControl, FormGroup} from 'react-bootstrap';
   ...
  render() {
    return (
        <form className="container-fluid" onSubmit={this.handleFormSubmit}>
            <FormGroup
                controlId="formBasicText">

                <Input inputType={'text'}
                   title= {'Name'}
                   name= {'name'}
                   value={this.state.newCoop.name}
                   placeholder = {'Enter cooperative name'}
                   handleChange = {this.handleInput}

                   /> {/* Name of the cooperative */}

Компонент «Вход» (src / components / Input.jsx) имеет этот источник ...

import React from 'react';
import {FormControl, FormLabel} from 'react-bootstrap';

const Input = (props) => {
    return (
  <div>
      <FormLabel>{props.name}</FormLabel>
      <FormControl
            type="{props.type}"
            id={props.name}
            name={props.name}
            value={props.value}
            placeholder="{props.placeholder}"
            onChange={props.handleChange}
          />
  </div>
    )
}

export default Input;

Проблема в том, что когда моя форма отображается, значения в моих компонентах не оцениваются. Я ожидал бы, что "{props.name}" будет оцениваться как "name", но вместо этого он будет отображаться как "{props.name}". Это результат HTML ...

<input name="name" placeholder="{props.placeholder}" type="{props.type}" id="name" class="form-control" value="">

Что еще мне нужно сделать, чтобы форма правильно отображалась?

Answer 1

В вашем компоненте Input вы передаете строки как значения для type и placeholder из-за кавычек. Заменить type="{props.type}" на type={props.type} et c.