Question 165356 in Wordpress Question posted in
The official Wordpress documentation can be found here.

How can I avoid “Object Object” in a custom Gutenberg block?

I have a question. I am new and still learning 🙂

I want to create a review block with gutenberg. And the rating has to be stars. But for some reason i dont get it worked. Maybe i am doing it wrong, maybe it isn’t possible. I hope some on could explain it to me.

For now i have created a selectcontrol and this works. When selecting A i get A. But i want to replace value: A for a star:

What i have

<SelectControl
  multiple
  label={ __( 'Select some users:' ) }
  value={ testimonial.selectcontrol } // e.g: value = [ 'a', 'c' ]
  onChange={ (value) => handleTestimonialChange('selectcontrol', value, index ) }
  options={ [
   { value: null, label: 'Select a User', disabled: true },
   { value: 'a', label: 'User A' },
   { value: 'b', label: 'User B' },
   { value: 'c', label: 'User c' },
    ] }
/>

What i want

<SelectControl
  multiple
  label={ __( 'Select some users:' ) }
  value={ testimonial.selectcontrol } // e.g: value = [ 'a', 'c' ]
  onChange={ (value) => handleTestimonialChange('selectcontrol', value, index ) }
  options={ [
   { value: null, label: 'Select a User', disabled: true },
   { value: <i class="fas fa-star"></i>, label: 'User A' },
   { value: 'b', label: 'User B' },
   { value: 'c', label: 'User c' },
    ] }
/>

The value returns in this code:

selectcontrolDisplay =props.attributes.testimonial.map( ( testimonial, index ) => {
return <span key={ index }>{testimonial.selectcontrol};
} );

What i get back in the backed from WordPress is object object. Like mentiond above, i am not sure or it possible. If some on could explain something different with the same result. I am happy to.

If the full code is needed please let me know.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for time and answer! i got it work with a minor change where i changed '===' to '=='.

      selectcontrolDisplay = props.attributes.testimonial.map( ( testimonial, index ) => {
   return  (testimonial.selectcontrol == 'star') ? <i class="fas fa-star"></i> : testimonial.selectcontrol;
   } );

  2. 0

    I think the reason you are getting [object object] is that in JSX <i class="fas fa-star"></i> gets converted into a React component (an object). So in your onChange={ (value) => {...} } line, value is a React component (an object) not the HTML you want to output. I would suggest using some other identifier as your option value (e.g. a string) and then converting that into your star icon when rendering:

    props.attributes.testimonial.map((testimonial, index) => {
  return (testimonial.selectcontrol === 'star')
    ? <i class="fas fa-star"></i>
    : testimonial.selectcontrol;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search