Uncaught Error: Objects are not valid as a React child when returning the const

Question

I don't know why im getting this error since im mapping through the object. Here is the code:

const Leki = (props) => {
        const fakePayload = props.fakePayload;
        const drugs = props.drugs;

        const rngPayloadId = Math.floor(Math.random() * 4);

        const payload = fakePayload.map(payload => {
            if (payload.payloadId === rngPayloadId) {

                return payload.drugsId.map(id => {
                    return <tr>
                        {props.dispatch(setId(uuid(), id))}
                    <td>{id}</td>
                    <td>{drugs[id].name}</td>
                    <td><input value={undefined} type="number" name="price" /></td>
                </tr>
            })
        }
    })
    return(
        <tbody>{payload}</tbody>
    )
}

What should I do to avoid this problem?

Currently condition is always met, so its useless. Also im not lacking (), it works with and without it this way — MazMat, Sep 26 '17 at 12:34
its more readable that way though. but i respect your preference. thought the problem might lie on ```{props.dispatch(setId(uuid(), id))}``` try checking if this is returning an object. if you want to display an object inside react, stringify it. also i dont agree with "always met" no such thing on conditions. — Rei Dien, Sep 26 '17 at 12:36
check this fiddle so you can confirm. https://jsfiddle.net/ra3gonro/ look at the console it has the same error as yours. remove the ```{info}``` and you will be good to go. — Rei Dien, Sep 26 '17 at 12:39

Hemerson Carlin · Answer 1 · 2017-09-26T12:51:45.817

array.map returns another array. Since you are returning results only when payload.payloadId === rngPayloadId, some of payload entries are null.

Try to use fakePayload.filter instead.

I made an example so you can check it out.

const Leki = ({ fakePayload = [], drugs = [] }) => {
  const rngPayloadId = Math.floor(Math.random() * 4)
  
  const payload = fakePayload
    .filter(payload => payload.payloadId === rngPayloadId)
    .map(payload =>
      payload.drugsId.map(id =>
        <tr key={id}>
          <td>Id: {id}</td>
          <td>{drugs[id].name}</td>
        </tr>
      )
    )
  
  return <tbody>{payload}</tbody>
}

const fakePayload = [{
  payloadId: 0,
  drugsId: [1, 2],
}, {
  payloadId: 1,
  drugsId: [3, 4],
}, {
  payloadId: 2,
  drugsId: [5, 6],
}, {
  payloadId: 3,
  drugsId: [7, 8],
}]
    
const drugs = {
  1: { name: 'Drug 1' },
  2: { name: 'Drug 2' },
  3: { name: 'Drug 3' },
  4: { name: 'Drug 4' },
  5: { name: 'Drug 5' },
  6: { name: 'Drug 6' },
  7: { name: 'Drug 7' },
  8: { name: 'Drug 8' },
}
    
class App extends React.Component {
  render() {
    return (
      <table>
        <Leki fakePayload={fakePayload} drugs={drugs} />
      </table>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

table tr td {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Get the same error with slightly different wording. When I had the component built differently I was maping through it and it was working fine, but I couldnt dispatch props in render() so I rebuilt the component to its current form and this time while props are dispatched I cant get them to render — MazMat, Sep 26 '17 at 12:30
Even though it works, the final payload is an array of an array (you are also mapping through `payload.drugsId`). Don't you think you have to flatten this array before rendering it?. — Hemerson Carlin, Sep 26 '17 at 12:44

score 0 · Answer 2 · answered Sep 26 '17 at 13:44

0

React doesn't know how to render objects or arrays inside {} (see this). When you're mapping payload.drugsId each id becomes an object so referencing it like this <td>{id}</td> will fail. You can use {id[0]} for example or just <td>{JSON.stringify(id)}<td> to see the result of the map in each iteration and alter your code as needed.

answered Sep 26 '17 at 13:44

Yoav

3,326
3
32
73

Well, React seems to know how to render them because when I alter the code a little I render the array without any problems, but then I cant dispatch props. When I remove "{props.dispatch(setId(uuid(), id))}" Everything works fine. When I move "{props.dispatch(setId(uuid(), id))}" to right after "payload.drugsId.map(id => {" program loops and crashes, because i try to set state inside of render apparently – MazMat Sep 26 '17 at 13:48

Uncaught Error: Objects are not valid as a React child when returning the const

2 Answers2