-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
50 lines (44 loc) · 1.36 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { useState } from 'react';
import TextInput from 'components/TextInput';
import { Answer } from 'types/answer';
import { AnswerRequest } from 'types/request/surveySubmitRequest';
export const multiInputsDataTestIds = {
base: 'multi-inputs__base',
};
interface MultiInputProps {
questionId: string;
items: Answer[];
onValuesChanged: (answers: AnswerRequest[]) => void;
}
const MultiInputs = ({ items, onValuesChanged }: MultiInputProps): JSX.Element => {
const [selectedValues, setSelectedValues] = useState<AnswerRequest[]>([]);
const handleValuesChanged = (answer: Answer, content: string) => {
const newSelectedValues = [
...selectedValues.filter((value) => value.id !== answer.id),
{
id: answer.id,
answer: content,
},
];
setSelectedValues(newSelectedValues);
onValuesChanged(newSelectedValues);
};
return (
<div data-test-id={multiInputsDataTestIds.base}>
{items.map((item) => (
<div key={item.id}>
<TextInput
inputAttributes={{
id: `answer-text-input__${item.id}`,
required: true,
type: 'text',
placeholder: item.text,
onChange: (event) => handleValuesChanged(item, event.target.value),
}}
/>
</div>
))}
</div>
);
};
export default MultiInputs;