(Only my 3rd post here, so please excuse any blatant issues).

The following is my Unit ponent, a child of a Course ponent (courses has_many units).

import React from 'react';
import { connect } from 'react-redux';
import { getUnits, addUnit, updateUnit } from '../reducers/units';
import { Container, Header, Form } from 'semantic-ui-react';

class Units extends React.Component {

  initialState = { name: ''}

  state = { ...this.initialState }

  ponentDidUpdate(prevProps) {
    const { dispatch, course } = this.props
    if (prevProps.course.id !== course.id)
      dispatch(getUnits(course.id))
  }

  handleSubmit = (e) => {
    debugger 
    e.preventDefault()
    debugger 
    const unit = this.state 
    const { dispatch } = this.props
    if (unit.id) {
      debugger 
      dispatch(updateUnit(unit))
    } else {
      debugger 
      dispatch(addUnit(unit))
      this.setState({ ...this.initialState })
    }
  }

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

  units = () => {
    return this.props.units.map( (unit, i) => 
      <ul key={i}>
        <li key={unit.id}> {unit.name}</li>
        <button>Edit Module Name</button> 
        <button>Delete Module</button> 
      </ul> 
    )
  }

  render() {
    const { name } = this.state 
    return (
      <Container>
        <Header as="h3" textAlign="center">Modules</Header>
        { this.units() }
        <button>Add a Module</button> 
        <Form onSubmit={this.handleSubmit}>
        <Form.Input 
          name="name"
          placeholder="name"
          value={name}
          onChange={this.handleChange}
          label="name"
          required
          />
        </Form> 
      </Container>
    )
  }
}
const mapStateToProps = (state) => {
  return { units: state.units, course: state.course }
}

export default connect(mapStateToProps)(Units);

The following is its reducer:

import axios from 'axios';
import { setFlash } from './flash'
import { setHeaders } from './headers'
import { setCourse } from './course'

const GET_UNITS = 'GET_UNITS'; 
const ADD_UNIT = 'ADD_UNIT'; 
const UPDATE_UNIT = 'UPDATE_UNIT'; 

export const getUnits = (course) => {
  return(dispatch) => {
    axios.get(`/api/courses/${course}/units`)
      .then( res => {
        dispatch({ type: GET_UNITS, units: res.data, headers: res.headers })
      })
  }
}

export const addUnit = (course) => {
  return (dispatch) => {
    debugger 
    axios.post(`/api/courses/${course}/units`)
      .then ( res => {
        dispatch({ type: ADD_UNIT, unit: res.data })
        const { headers } = res
        dispatch(setHeaders(headers))
        dispatch(setFlash('Unit added successfully!', 'green'))
      })
      .catch( (err) =>  dispatch(setFlash('Failed to add unit.', 'red')) )
  }
}

export const updateUnit = (course) => {
  return (dispatch, getState) => {
    const courseState = getState().course
    axios.put(`/api/courses/${course.id}/units`, { course })
      .then( ({ data, headers }) => {
        dispatch({ type: UPDATE_UNIT, course: data, headers })
        dispatch(setCourse({...courseState, ...data}))
        dispatch(setFlash('Unit has been updated', 'green'))
      })
      .catch( e => {
        dispatch(setHeaders(e.headers))
        dispatch(setFlash(e.errors, 'red'))
      })
  }
}

export default (state = [], action) => {
  switch (action.type) {
    case GET_UNITS:
      return action.units;
    case ADD_UNIT:
      return [action.unit, ...state]
    case UPDATE_UNIT:
    return state.map( c => {
      if ( c.id === action.unit.id )
        return action.unit
      return c
    })
    default:
      return state;
  }
};

Note: My reducer is working for my getUnits and rendering the units properly.

Note also: when I try to submit a new unit, it ignores all of the debuggers in my handleSubmit and the debuggers in my addUnits (in the reducer), but somehow renders the flash message of "Failed to add units".

Then the console logs the error seen in the title of this post.

I raked my routes and my post is definitely supposed to go to the route as it is.

I have tried passing in the unit and the course in various ways without any change to the error.

1. How can it hit the flash message without hitting any of the debuggers?

2. How do I fix this [object%20Object]issue?

Thanks in advance!

(Only my 3rd post here, so please excuse any blatant issues).

The following is my Unit ponent, a child of a Course ponent (courses has_many units).

import React from 'react';
import { connect } from 'react-redux';
import { getUnits, addUnit, updateUnit } from '../reducers/units';
import { Container, Header, Form } from 'semantic-ui-react';

class Units extends React.Component {

  initialState = { name: ''}

  state = { ...this.initialState }

  ponentDidUpdate(prevProps) {
    const { dispatch, course } = this.props
    if (prevProps.course.id !== course.id)
      dispatch(getUnits(course.id))
  }

  handleSubmit = (e) => {
    debugger 
    e.preventDefault()
    debugger 
    const unit = this.state 
    const { dispatch } = this.props
    if (unit.id) {
      debugger 
      dispatch(updateUnit(unit))
    } else {
      debugger 
      dispatch(addUnit(unit))
      this.setState({ ...this.initialState })
    }
  }

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

  units = () => {
    return this.props.units.map( (unit, i) => 
      <ul key={i}>
        <li key={unit.id}> {unit.name}</li>
        <button>Edit Module Name</button> 
        <button>Delete Module</button> 
      </ul> 
    )
  }

  render() {
    const { name } = this.state 
    return (
      <Container>
        <Header as="h3" textAlign="center">Modules</Header>
        { this.units() }
        <button>Add a Module</button> 
        <Form onSubmit={this.handleSubmit}>
        <Form.Input 
          name="name"
          placeholder="name"
          value={name}
          onChange={this.handleChange}
          label="name"
          required
          />
        </Form> 
      </Container>
    )
  }
}
const mapStateToProps = (state) => {
  return { units: state.units, course: state.course }
}

export default connect(mapStateToProps)(Units);

The following is its reducer:

import axios from 'axios';
import { setFlash } from './flash'
import { setHeaders } from './headers'
import { setCourse } from './course'

const GET_UNITS = 'GET_UNITS'; 
const ADD_UNIT = 'ADD_UNIT'; 
const UPDATE_UNIT = 'UPDATE_UNIT'; 

export const getUnits = (course) => {
  return(dispatch) => {
    axios.get(`/api/courses/${course}/units`)
      .then( res => {
        dispatch({ type: GET_UNITS, units: res.data, headers: res.headers })
      })
  }
}

export const addUnit = (course) => {
  return (dispatch) => {
    debugger 
    axios.post(`/api/courses/${course}/units`)
      .then ( res => {
        dispatch({ type: ADD_UNIT, unit: res.data })
        const { headers } = res
        dispatch(setHeaders(headers))
        dispatch(setFlash('Unit added successfully!', 'green'))
      })
      .catch( (err) =>  dispatch(setFlash('Failed to add unit.', 'red')) )
  }
}

export const updateUnit = (course) => {
  return (dispatch, getState) => {
    const courseState = getState().course
    axios.put(`/api/courses/${course.id}/units`, { course })
      .then( ({ data, headers }) => {
        dispatch({ type: UPDATE_UNIT, course: data, headers })
        dispatch(setCourse({...courseState, ...data}))
        dispatch(setFlash('Unit has been updated', 'green'))
      })
      .catch( e => {
        dispatch(setHeaders(e.headers))
        dispatch(setFlash(e.errors, 'red'))
      })
  }
}

export default (state = [], action) => {
  switch (action.type) {
    case GET_UNITS:
      return action.units;
    case ADD_UNIT:
      return [action.unit, ...state]
    case UPDATE_UNIT:
    return state.map( c => {
      if ( c.id === action.unit.id )
        return action.unit
      return c
    })
    default:
      return state;
  }
};

Note: My reducer is working for my getUnits and rendering the units properly.

Note also: when I try to submit a new unit, it ignores all of the debuggers in my handleSubmit and the debuggers in my addUnits (in the reducer), but somehow renders the flash message of "Failed to add units".

Then the console logs the error seen in the title of this post.

I raked my routes and my post is definitely supposed to go to the route as it is.

I have tried passing in the unit and the course in various ways without any change to the error.

1. How can it hit the flash message without hitting any of the debuggers?

2. How do I fix this [object%20Object]issue?

Thanks in advance!

• javascript
• reactjs
• redux

• Without even looking at the code (I'm not terribly familiar with React), [object Object] is what is shown when you don't stringify an object (presumably a class). – jhpratt Commented Jul 10, 2018 at 21:16
• I solved by github./apollographql/apollo-client/issues/… – Shivam Jha Commented Oct 22, 2020 at 13:32

2 Answers 2

The variable course in the following line

axios.get(`/api/courses/${course}/units`)

is an object. When you try to convert an object to a string in JavaScript, [object Object] is the result. The space is then converted to %20 for the URL request.

I would look at the contents of the course variable. Likely, what you actually want in the URL is something inside of course. Perhaps course.id.

If you are still having issues, you'll need to explain what value should go in the URL between /courses/ and /units, and where that data exists.

You are invoking addUnit and updateUnit with a parameter that is equal to this.state in handleSubmit

const unit = this.state
addUnit(unit)

As this.state is of type object, it is string concatenated as object%20object.

getUnit works fine as the parameter passed there es from the prop course. Check the value of state inside handleSubmit.