Использование карты для рендеринга нескольких полей в избыточном виде - PullRequest
Новая
       20

Использование карты для рендеринга нескольких полей в избыточном виде

0 голосов
/ 07 ноября 2019

Я использую API для получения данных из базы данных, и у этого ответа есть имя, идентификатор, URL изображения. Мне нужно использовать эти данные для создания флажков, чтобы получить пользовательский ввод. поэтому я использовал .map для генерации нескольких чекбоксов в избыточной форме. но это не появляется в браузере. редукторы работают хорошо, и эта проблема возникает, когда я использую redux-формы. 

renderFieldCheckbox(field){
        const { meta: { touched, error } } = field;
        const className = `form-group ${touched && error ? "has-danger" : ""}`;

        return(
                <div class="form-group form-check">
                    <input type="checkbox" name="publishers" class="form-check-input" id={field.id} />
                    <label class="form-check-label" for="publisher1">
                        <img src={field.image} className="img-fluid" alt={field.name} />            

                    </label>
                </div>

        );

    }

render() {
        const { handleSubmit } = this.props;
        return (
            <row>
              <form className="mt-3" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                {
                    this.props.publisherFilter&&this.props.publisherFilter.map((publisher, index) =>{ 
                        console.log("Field here ------");
                        let imgurl = require(`../assets/img/${publisher.image}`);
                        return( 
                            <Col xs="6" lg="3">
                              <Field 
                            id = {publisher.id}
                            name = {publisher.name}
                            image = {imgurl}
                            Component = {this.renderFieldCheckbox}
                                />
                            </Col>
                        );
                }  )}

            </form>

          </row>
        );
    }
...