I'm trying to initialize state inside one of my React Components for an integer data type. Right now my state looks like this:

state = {
  username: '',
  email: '',
  password: '',
  user_id: null,
  id: null,
  toy_id: null,
  loading: false,
}

Because they are not strings I have been using null for user_id, id and toy_id, however later down the road when I pass down the properties:

const { email, password, user_id, id, toy_id } = this.state

// ...

await this.props.loginUserToy(email, password, id, toy_id)

console.log('LOGIN loginUserToy email', email)
console.log('LOGIN loginUserToy password', password)
console.log('LOGIN loginUserToy id', id)
console.log('LOGIN loginUserToy toy_id', toy_id)

Here is loginUserToy from my action creators page:

export const loginUserToy = async (email, password, id, toy_id) => {
  try {
    const response = await axios({
      method: 'POST',
      url: `${API_URL}/api/get_token`,
      data: {
        email,
        password
      }
    })

    const { token } = response.data

    const userResponse = await axios({
      method: 'POST',
      url: `${API_URL}/api/login`,
      headers: {
        Authorization: `${token}`
      },
      data: {
        email,
        password
      }
    })

    const getProfileResponse = await axios({
      method: 'POST',
      //url: `${API_URL}/api/user_profile`,
      url: `${API_URL}/api/toy`,
      headers: {
        Authorization: `${token}`
      },
      data: {
        id,
        toy_id
      }
    })

    const { Name, Description, Where, When, Picture } = getProfileResponse.data

    return {
      type: FETCH_TOY,
      payload: {
        token,
        email,
        password,
        id,
        toy_id,
        name: Name,
        description: Description,
        location: Where,
        date: When,
        image: Picture
      }
    }
  }
  catch (err) {
    console.log('Exception in actions/user/loginUser err', err)
  }
}

I get back 't' & 't' for the first two logs (which is correct) but I continue to get back null for the second two logs. I understand an empty string is different from a null which means a non-existent value.

However, is there something else I can do here ?

I'm trying to initialize state inside one of my React Components for an integer data type. Right now my state looks like this:

state = {
  username: '',
  email: '',
  password: '',
  user_id: null,
  id: null,
  toy_id: null,
  loading: false,
}

Because they are not strings I have been using null for user_id, id and toy_id, however later down the road when I pass down the properties:

const { email, password, user_id, id, toy_id } = this.state

// ...

await this.props.loginUserToy(email, password, id, toy_id)

console.log('LOGIN loginUserToy email', email)
console.log('LOGIN loginUserToy password', password)
console.log('LOGIN loginUserToy id', id)
console.log('LOGIN loginUserToy toy_id', toy_id)

Here is loginUserToy from my action creators page:

export const loginUserToy = async (email, password, id, toy_id) => {
  try {
    const response = await axios({
      method: 'POST',
      url: `${API_URL}/api/get_token`,
      data: {
        email,
        password
      }
    })

    const { token } = response.data

    const userResponse = await axios({
      method: 'POST',
      url: `${API_URL}/api/login`,
      headers: {
        Authorization: `${token}`
      },
      data: {
        email,
        password
      }
    })

    const getProfileResponse = await axios({
      method: 'POST',
      //url: `${API_URL}/api/user_profile`,
      url: `${API_URL}/api/toy`,
      headers: {
        Authorization: `${token}`
      },
      data: {
        id,
        toy_id
      }
    })

    const { Name, Description, Where, When, Picture } = getProfileResponse.data

    return {
      type: FETCH_TOY,
      payload: {
        token,
        email,
        password,
        id,
        toy_id,
        name: Name,
        description: Description,
        location: Where,
        date: When,
        image: Picture
      }
    }
  }
  catch (err) {
    console.log('Exception in actions/user/loginUser err', err)
  }
}

I get back 't' & 't' for the first two logs (which is correct) but I continue to get back null for the second two logs. I understand an empty string is different from a null which means a non-existent value.

However, is there something else I can do here ?

• javascript
• reactjs
• react-native

• Can we see what this loginUserToy function is doing? – glhrmv Commented Nov 12, 2019 at 15:36
• @glhrmv I can add my reducers and/or models / views from my flask routes as well if that would further clarify. – will Commented Nov 12, 2019 at 15:56
• Is using null causing any problem in your application code? – Tunmise Ogunniyi Commented Nov 12, 2019 at 18:15

1 Answer 1

Try simply initializing them as 0 instead of as null.

state = {
  username: '',
  email: '',
  password: '',
  user_id: 0
  id: 0,
  toy_id: 0,
  loading: false,
}