web2.0-frontend/src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

import React from "react";
import { Draggable } from "react-beautiful-dnd";
import { Question, InputProps } from "./index";
import OptionsWidget from "./OptionsWidget";
import TypeWidget from "./TypeWidget";
import QuestionElement from "./Question";

export interface QuestionListProps {
  questions: Question[];
  innerRef: any;
  placeholder: any;
  onChange: (value: Question[]) => void;
}
export interface QuestionListState { }

class QuestionList extends React.Component<QuestionListProps, QuestionListState> {
  renderTextWidget = ({ questions, value, index }: InputProps) => (
    <input type="text" value={value} onChange={this.handleNameInputChange(questions, index)} />
  )

  handleNameInputChange = (questions: Question[], index: number) => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;
    questions[index].name = val;
    onChange(questions);
  }

  handleElementRemove = (questions: Question[], index: number) => () => {
    const { onChange } = this.props;
    const newQuestions = [...questions];
    newQuestions.splice(index, 1);
    onChange(newQuestions);
  }

  renderQuestions() {
    const { questions, onChange, placeholder } = this.props;
    return questions.map((q, index) => {
      const nameWidgetProps = { value: q.name, type: "text", questions, index };
      const nameWidget = this.renderTextWidget(nameWidgetProps);

      const dataProps = { value: q.options, type: q.type, questions, index };
      const optionsWidget = <OptionsWidget inputProps={dataProps} onChange={onChange} />;
      const typeSelectWidget = <TypeWidget inputProps={dataProps} onChange={onChange} />;
      return (
        <Draggable draggableId={q.id} key={q.id} index={index}>
          {(provided) => (
            <div
              className="signup-questions-widget-row"
              {...provided.draggableProps}
              {...provided.dragHandleProps}
              ref={provided.innerRef}
            >
              <QuestionElement
                onRemove={this.handleElementRemove(questions, index)}
              >
                {nameWidget}
                {typeSelectWidget}
                {optionsWidget}
              </QuestionElement>
            </div>
          )}
        </Draggable>
      );
    });
  }

  render() {
    const { placeholder, innerRef } = this.props;

    return (
      <div ref={innerRef}>
        {this.renderQuestions()}
        {placeholder}
      </div>
    );
  }
}

export default QuestionList;