Как получить и показать выбранное значение в качестве нового состояния на HTML-странице

Question

Я получаю информацию о членах Конгресса через API ProPublica. Я хотел бы, чтобы пользователь мог выбрать свое состояние в раскрывающемся списке и чтобы на его веб-странице отображались сведения о конгрессменах (через штат). Я чувствую, что забываю цикл for, но я даже не знаю, где его поставить. В основном, я не уверен, как подключить пользовательский вход в мой реквизит / состояние. Это то, что я до сих пор:

FORM.js

<form onSubmit={props.handleSubmit}>
    <input type="text" name="first_name" value={props.first_name} onChange={props.handleChange}/>
    <input type="text" name="last_name" value={props.last_name} onChange={props.handleChange}/>
    <select name="stateSelect" value={props.stateSelect} onChange={props.handleChange}>

        <option></option>
        <option id="AL" name="AL">Alabama</option>
        <option id="AK" name="AK">Alaska</option>
        <option id="AZ" name="AZ">Arizona</option>
        // the following 50 states are here

    </select>
    <button>FIND YOUR REPRESENTATIVE</button>
</form>

APP.JS ниже

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            first_name: ' ',
            last_name: ' ',
            stateSelect: ' '
        }
    }

    handleChange = e => {
        const { name, value } = e.target
        this.setState({
            [name]: value, 
        })
    }

    handleSubmit = e => {
        e.preventDefault()
        const newCongress = {
            first_name: this.state.first_name,
            last_name: this.state.last_name,
            stateSelect: this.state.stateSelect
        }

        this.props.getCongressMembers(newCongress)

        this.setState(prevState =>({
            first_name: "",
            last_name: ""
        }))
    }

    componentDidMount() {
        this.props.getCongressMembers()
    }


    render() {
        const mappedCongress = this.props.congressMembers.map(member => {
            return <div key={member.id}>
                <h1>{member.first_name} {member.last_name}</h1>
                <h4>Tweet: #{member.twitter_account}</h4>
                <h5>{member.state}</h5>
            </div>
        })

        return (
            <div>
                <SVGMap map={USA} />
                <Form 
                    handleSubmit={this.handleSubmit} 
                    handleChange={this.handleChange} 
                    first_name={this.state.first_name} 
                    last_name={this.state.last_name}
                    stateSelect={this.state.stateSelect}
                />
                {mappedCongress}
            </div>
        );
    }
}

export default connect(state => state, { getCongressMembers })(App)

Answer 1

I found the answer - here is my code:

    import React from 'react';
import { connect } from "react-redux";
import { getCongressMembers } from '../redux/index';
// import { withRouter } from "react-router-dom"
import states from "../states.json"

class Form extends React.Component {
    constructor() {
        super()
        this.state = {
            senators: [],
            stateSelect: '',
        }

    }

    componentDidMount(){
        this.props.getCongressMembers()
    }


    handleChange = e => {
        const { name, value } = e.target
        this.setState({
            [name]: value,
        })
    }

    handleSubmit = e => {
        e.preventDefault()
        this.setState({stateSelect: e.target.value})
    }


    getStateCongress = e =>{
        // e.preventDefault()
        const specificStateMembers = this.props.congressMembers.filter(member => member.state === this.state.stateSelect)
        this.setState({senators: [...specificStateMembers]})
        // this.state.senators.push(...specificStateMembers)
        // console.log(specificStateMembers)
        // console.log(this.state.senators)

    }

    render() {
        const statesOpts = states.map(state => {
            return <option key={state.id} id={state.id} name={state.name}>{state.id}</option>
        })

        return (

            <form onSubmit={this.handleSubmit}>
                {/* <input placeholder="First Name" type="text" name="first_name" value={this.state.first_name} onChange={this.handleChange} />
                <input placeholder="Last Name" type="text" name="last_name" value={this.state.last_name} onChange={this.handleChange} /> */}
                <select name="stateSelect" value={this.state.stateSelect} onChange={this.handleChange}>

                    <option>Choose a state</option>
                    {statesOpts}

                </select>
                <button onClick={this.getStateCongress}>FIND YOUR REPRESENTATIVE</button>
                <div>
                    {this.state.senators.map(twoMemb=>{
                        return (<div>
                            <h1>{twoMemb.first_name} {twoMemb.last_name}</h1>
                        </div>)
                    })}


            </div>
        </form>
    )
}

}