-
Notifications
You must be signed in to change notification settings - Fork 0
/
RadioInputElement.tsx
29 lines (25 loc) · 1004 Bytes
/
RadioInputElement.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
import React from "react";
import styled from "styled-components";
import RadioElement from "./RadioElement";
import '../Stylesheets/RadioInputElement.css'
const InputDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
`
// Styling for radiocontainer in separate CSS file due to complexity
// Generic component for form radio input element
export default function RadioInputElement(props: { name: string, values: string[], heading: string,
handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void }) {
const random = Math.random();
return (
<InputDiv>
<label htmlFor={random.toString()}>{props.heading}:</label>
<div className={"radiocontainer"} id={random.toString()}>
{props.values.map((element) =>
<RadioElement name={props.name} value={element} handleChange={props.handleChange} key={element}/>)}
</div>
</InputDiv>
)
}