import { Button , FormControl , InputGroup } from 'react-bootstrap' ; import * as React from 'react' ; export default function KeyValuePair ( { handleDelete , index , onKeyChange , onValueChange , kvPair } ) { return ( < InputGroup > < InputGroup . Prepend > < InputGroup . Text > Key : < /InputGroup.Text> < /InputGroup.Prepend> < FormControl onChange = { ( e ) => { onKeyChange ( index , e . target . value ) ; } } value = { kvPair . key } / > < InputGroup . Prepend > < InputGroup . Text > Value : < /InputGroup.Text> < /InputGroup.Prepend> < FormControl onChange = { ( e ) => { onValueChange ( index , e . target . value ) ; } } value = { kvPair . value } / > < InputGroup . Append > < Button variant = "outline-danger" onMouseDown = { ( ) => handleDelete ( index ) } > Delete < /Button> < /InputGroup.Append> < /InputGroup>); }