Populate a dropdown from an API using Reactstrap

Question

I have this working (sort of) with React, but can't quite work out the syntax to apply the Reactstrap pretty ui to it (I've removed some superfluous stuff for readability).

The following works (but looks ugly):

export default class CustomModal extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        activeItem: this.props.activeItem,
    validate: {
        emailState: '',
    },
    };
}



componentDidMount() {
fetch('http://localhost:8000/api/todos/')
     .then(results => results.json())
     .then(data => this.setState({ data: data })
 )}



render() {
    const { toggle, onSave } = this.props;
    const { data } = this.state;
    return (            
        <Modal isOpen={true} toggle={toggle}>
            <ModalHeader toggle={toggle}> Tool Details </ModalHeader>
            <ModalBody>
                <Form>
                    <Col md={6}>
                        <FormGroup>
                            <Label for="campus">Campus</Label>
                                {['title'].map(key => (
                                <select key={key}>
                                    {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
                                </select>
                                ))}
                        </FormGroup>

                        <FormGroup>
                        <Label for="workstream">Workstream</Label>
                        <Input
                            type="select"
                            name="workstream"
                            value={this.state.activeItem.workstream}
                            onChange={this.handleChange}
                            required
                            placeholder="Choose workstream">
                            <option default>Select workstream</option>
                            <option>Automation + Analytics</option>
                            <option>Customer Protection</option>
                        </Input>
                    </FormGroup>

This gives me the following:

I'm trying to have this dynamic dropdown styled like the rest, but can't quite work out the syntax (I'm learning as I go, in case you haven't already noticed, so go easy! If there's a better way I'm all ears too, but I'm a complete beginner to this so far.

Thanks a lot!

Answer 1

Use the same way you used for the workstream select, except use a .map() to generate the options instead of having them hardcoded.

{['title'].map(key => (
  <Input
    key={key}
    type="select"
    name={key}
    value={this.state.activeItem.title}
    onChange={this.onChange}>
    {this.state.data.map(({ [key]: value }) => <option key={value}>{value}</option>)}
  </Input>
))}

This is provided you have this.state.activeItem.title and your onChange can handle both the workstream and campus selects.