Я пытаюсь создать группу FormGroup в ReactJS, используя React Bootstrap, но вместо одного раскрывающегося списка я хочу иметь шесть кнопок, которые можно выбрать несколько раз. Я не уверен, какой тип ввода я бы использовал. Я хочу, чтобы пользователь мог просто щелкнуть один из блоков, а затем он добавит его в FormControl как часть массива.
Я включил скриншот цели, к которой я иду. 
Это мой код страницы формы:
ProfileForm. js
const initialState = {
company: '',
website: '',
location: '',
status: '',
skills: '',
interests: '',
githubusername: '',
bio: '',
twitter: '',
facebook: '',
linkedin: '',
youtube: '',
instagram: ''
};
const ProfileForm = ({
profile: { profile, loading },
createProfile,
getCurrentProfile,
history
}) => {
const [formData, setFormData] = useState(initialState);
const [displaySocialInputs, toggleSocialInputs] = useState(false);
useEffect(() => {
if (!profile) getCurrentProfile();
if (!loading && profile) {
const profileData = { ...initialState };
for (const key in profile) {
if (key in profileData) profileData[key] = profile[key];
}
for (const key in profile.social) {
if (key in profileData) profileData[key] = profile.social[key];
}
if (Array.isArray(profileData.skills))
profileData.skills = profileData.skills.join(', ');
setFormData(profileData);
}
}, [loading, getCurrentProfile, profile]);
const {
company,
website,
location,
status,
skills,
interests,
githubusername,
bio,
twitter,
facebook,
linkedin,
youtube,
instagram
} = formData;
const onChange = e =>
setFormData({ ...formData, [e.target.name]: e.target.value });
const onSubmit = e => {
e.preventDefault();
createProfile(formData, history, profile ? true : false);
};
return (
<Container>
<small>* = required field</small>
<form className="form" onSubmit={onSubmit}>
<div className="form-group">
<select name="status" value={status} onChange={onChange}>
<option>* Select Professional Status</option>
<option value="Web Developer">Web Developer</option>
<option value="Back-End Developer">Back-End Developer</option>
<option value="Full Stack Developer">Full Stack Developer</option>
<option value="Graphic Designer">Graphic Designer</option>
<option value="User Interface Designer">
User Interface Designer
</option>
<option value="User Experience Engineer">
User Experience Engineer
</option>
<option value="Student or Learning">Student or Learning</option>
<option value="Instructor">Instructor or Teacher</option>
<option value="Intern">Intern</option>
<option value="Other">Other</option>
</select>
<small className="form-text">
Give us an idea of where you are at in your career
</small>
</div>
<Form.Group>
<Form.Label>Company</Form.Label>
<FormControl
type="text"
placeholder="Company"
name="company"
value={company}
onChange={onChange}
></FormControl>
<small className="form-text">
Could be your own company or one you work for
</small>
</Form.Group>
<Form.Group>
<Form.Label>Website</Form.Label>
<FormControl
type="text"
placeholder="Website"
name="website"
value={website}
onChange={onChange}
></FormControl>
<small className="form-text">
Could be your own or your company website
</small>
</Form.Group>
<Form.Group>
<Form.Label>Location</Form.Label>
<FormControl
type="text"
placeholder="Location"
name="location"
value={location}
onChange={onChange}
></FormControl>
<small className="form-text">
City & state suggested (eg. Boston, MA)
</small>
</Form.Group>
<Form.Group>
<Form.Label>Skills</Form.Label>
<FormControl
type="text"
placeholder="* Skills"
name="skills"
value={skills}
onChange={onChange}
required
></FormControl>
<small className="form-text">
Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
</small>
</Form.Group>
<Form.Group>
<Form.Label>Github Username</Form.Label>
<FormControl
type="text"
placeholder="Github Username"
name="githubusername"
value={githubusername}
onChange={onChange}
></FormControl>
<small className="form-text">
If you want your latest repos and a Github link, include your
username
</small>
</Form.Group>
<Form.Group>
<Form.Label>Bio</Form.Label>
<FormControl
as="textarea"
rows="3"
placeholder="A short bio of yourself"
name="bio"
value={bio}
onChange={onChange}
></FormControl>
<small className="form-text">Tell us a little about yourself</small>
</Form.Group>
<div className="my-2">
<button
onClick={() => toggleSocialInputs(!displaySocialInputs)}
type="button"
className="btn btn-light"
>
Add Social Network Links
</button>
<span>Optional</span>
</div>
{displaySocialInputs && (
<Container>
<div className="form-group social-input">
<i className="fab fa-twitter fa-2x" />
<FormControl
type="text"
placeholder="Twitter URL"
name="twitter"
value={twitter}
onChange={onChange}
className="small-placeholder"
/>
</div>
<div className="form-group social-input">
<i className="fab fa-facebook fa-2x" />
<FormControl
type="text"
placeholder="Facebook URL"
name="facebook"
value={facebook}
onChange={onChange}
/>
</div>
<div className="form-group social-input">
<i className="fab fa-youtube fa-2x" />
<FormControl
type="text"
placeholder="YouTube URL"
name="youtube"
value={youtube}
onChange={onChange}
/>
</div>
<div className="form-group social-input">
<i className="fab fa-linkedin fa-2x" />
<FormControl
type="text"
placeholder="Linkedin URL"
name="linkedin"
value={linkedin}
onChange={onChange}
/>
</div>
<div className="form-group social-input">
<i className="fab fa-instagram fa-2x" />
<FormControl
type="text"
placeholder="Instagram URL"
name="instagram"
value={instagram}
onChange={onChange}
/>
</div>
</Container>
)}
<input type="submit" className="btn btn-primary my-1" />
<Link className="btn btn-light my-1" to="/dashboard">
Go Back
</Link>
</form>
</Container>
);
};
ProfileForm.propTypes = {
createProfile: PropTypes.func.isRequired,
getCurrentProfile: PropTypes.func.isRequired,
profile: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
profile: state.profile
});
export default connect(
mapStateToProps,
{ createProfile, getCurrentProfile }
)(withRouter(ProfileForm));