title: JavaScript React Redux: Field from Database is not Rendering in Web Page and Can't Select Value in DropDown
body: <p>I have a table with a field called isAdmin on the back-end.  The isAdmin field is either true or false for different users.  </p>
  
  <p><a href="https://i.stack.imgur.com/dfi5x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dfi5x.png" alt="enter image description here"></a></p>
  
  <p>Below is my react/redux code that renders that front-end using the field names where applicable: </p>
  
  <pre><code>import React from 'react'
  import {connect} from 'react-redux'
  import {getUsers} from '../store/allUsers' // toDate
  import {updateUserThunk, fetchSingleUser} from '../store/singleUser'
  // Status Filter import BeerFilter from './BeerFilter'
  import Card from 'react-bootstrap/Card'
  import Button from 'react-bootstrap/Button'
  import {UncontrolledCollapse} from 'reactstrap'
  
  export class AllUsers extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        showForm: false,
        isAdmin: ''
      }
      this.handleChange = this.handleChange.bind(this)
      this.handleSubmit = this.handleSubmit.bind(this)
    }
  
    componentDidMount() {
      try {
        this.props.fetchInitialUsers()
      } catch (error) {
        console.error(error)
      }
    }
  
    clickHandlerOne() {
      let hidden = this.state.showForm
      this.setState({
        showForm: !hidden
      })
    }
  
    handleChange(event) {
      //console.log('event.target', event.target)
      this.setState({
        [event.target.name]: event.target.value
      })
    }
  
    async handleSubmit(userId) {
      event.preventDefault()
  
      const updatedUser = {
        id: userId,
        isAdmin: this.state.isAdmin
      }
  
      // console.log('UPDATE USER', updatedUser)
  
      await this.props.updateUserThunk(updatedUser)
      this.props.fetchInitialUsers()
    }
  
    render() {
      const users = this.props.users
      // console.log('PROPS', this.props)
      console.log('USERS', this.props.users)
  
      return (
        &lt;div&gt;
          {/* &lt;div className="options"&gt;
            &lt;select onChange={this.handleChange}&gt;
              &lt;option value=""&gt;Sort By...&lt;/option&gt;
              &lt;option value="priceHighToLow"&gt;Price (high to low)&lt;/option&gt;
              &lt;option value="priceLowToHigh"&gt;Price (low to high)&lt;/option&gt;
              &lt;option value="name"&gt;Name&lt;/option&gt;
            &lt;/select&gt;
  
            &lt;BeerFilter /&gt;
            &lt;/div&gt; */}
  
          &lt;div className="flex-cards"&gt;
            {users.map(user =&gt; (
              &lt;Card style={{width: '18rem'}} key={user.id}&gt;
                &lt;Card.Body&gt;
                  &lt;Card.Title&gt;User Id: {user.id}&lt;/Card.Title&gt;
                  &lt;Card.Text&gt;
                    &lt;div&gt;
                      &lt;ul&gt;
                        &lt;li&gt;
                          &lt;div className="highlight"&gt;
                            &lt;img src={user.imageUrl} /&gt;
                          &lt;/div&gt;
                          &lt;div className="details"&gt;
                            &lt;p&gt;Username: {user.username}&lt;/p&gt;
                            &lt;p&gt;User Email: {user.email}&lt;/p&gt;
                            &lt;p&gt;Admin Status: {user.isAdmin}&lt;/p&gt;
                            &lt;p&gt;
                              Created Date:{' '}
                              {new Intl.DateTimeFormat('en-GB', {
                                month: 'short',
                                day: '2-digit',
                                year: 'numeric'
                              }).format(new Date(user.createdAt))}
                            &lt;/p&gt;
                            &lt;p /&gt;
                            &lt;Button
                              id={`user${user.id}`}
                              onClick={() =&gt; {
                                this.clickHandlerOne()
                              }}
                              variant="danger"
                            &gt;
                              Admin Status Toggle
                            &lt;/Button&gt;
                            &lt;UncontrolledCollapse toggler={`#user${user.id}`}&gt;
                              {/* {this.state.showForm &amp;&amp; (
                                &lt;UpdateUserStatus userId={user.id} /&gt;
                              )} */}
                              &lt;form onSubmit={() =&gt; this.handleSubmit(user.id)}&gt;
                                &lt;div&gt;
                                  &lt;span&gt;
                                    &lt;select
                                      name="isAdmin"
                                      value={
                                        typeof user.isAdmin === 'string'
                                          ? this.state.isAdmin
                                          : user.isAdmin
                                      }
                                      onChange={this.handleChange}
                                    &gt;
                                      &lt;option value="true"&gt;true&lt;/option&gt;
                                      &lt;option value="false"&gt;false&lt;/option&gt;
                                    &lt;/select&gt;
                                  &lt;/span&gt;
  
                                  &lt;p /&gt;
                                  &lt;span&gt;
                                    &lt;p&gt;
                                      {/* */}
                                      &lt;button type="submit"&gt;Submit&lt;/button&gt;
                                    &lt;/p&gt;
                                  &lt;/span&gt;
  
                                  {/* delete thunk
                                  &lt;span&gt;
                                    &lt;p&gt;
                                      &lt;button type="button"&gt;Delete&lt;/button&gt;
                                    &lt;/p&gt;
                                  &lt;/span&gt;
                                  */}
                                &lt;/div&gt;
                              &lt;/form&gt;
                            &lt;/UncontrolledCollapse&gt;
                          &lt;/div&gt;
                        &lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;
                  &lt;/Card.Text&gt;
                &lt;/Card.Body&gt;
              &lt;/Card&gt;
            ))}
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; {
    return {
      users: state.allUsers
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      loadSingleUser: id =&gt; dispatch(fetchSingleUser(id)),
      updateUserThunk: updatedUser =&gt; dispatch(updateUserThunk(updatedUser)),
      //getSortedBeers: (sortBy, beers) =&gt; dispatch(sortBeers(sortBy, beers)),
      fetchInitialUsers: () =&gt; dispatch(getUsers())
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(AllUsers)
  </code></pre>
  
  <p>I have two issues with trying to render the isAdmin field.  First, the true or false value associated with the isAdmin field never gets rendered. </p>
  
  <p>See pic: </p>
  
  <p><a href="https://i.stack.imgur.com/NbFRf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NbFRf.png" alt="enter image description here"></a></p>
  
  <p><strong>Question 1: how can I get the value of isAdmin field to render?</strong></p>
  
  <p>My second question is related to updating my isAdmin field and rendering the update on the web page.  </p>
  
  <p>After I click on the red toggle button, I have a drop down field where I can select true or false.  It is defaulted on the value "true" or "false" from the database.  But I can't seem to select the other drop down value.  It remains stuck on the default selection. </p>
  
  <p><a href="https://i.stack.imgur.com/Ux4eF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ux4eF.png" alt="enter image description here"></a></p>
  
  <p>For example, the drop down defaulted on false.  When I open the drop down and select true, it doesn't select true ... it still has false selected.  </p>
  
  <p><strong>Question 2: What am I doing wrong?</strong></p>
  
  <p>The end goal is to be able to select the opposite of what is defaulted in the dropdown and update my Admin Status to the selected status. </p>