CODEWITHSUNDEEP
javascriptarraysreactjsobject
Casterly
Casterly

Reputation: 73

Can't return icon according to incorrect written if/else statement

I have an array of objects like that:

     {
      "comment_description": "hello, this is false answer",
      "right_answered_by_post_author": false
     },
     {
      "comment_description": "hello, this is true answer",
      "right_answered_by_post_author": true
     },
     {
      "comment_description": "hello, this is false answer",
      "right_answered_by_post_author": false
     }
    ]

I want to make answer badge (which mostly looking like stackoverflow answer badge), that renders relevant icon in component. (

I use Fontawesome for react and I want render checked square component if there is at least one object that contains: "right_answered_by_post_author": true

I want render unchecked green square when there is some answers but there is not even one "right_answered_by_post_author": true (all answers are false)

And I want render unchecked native non-styled icon if there is not any answer. (if there is not any object in array)

I tried to .map the array of the 'answer' objects and check if there is 'true' answer render 'faCheckSquare' icon, if there is not true answer but there is all false answer render green faSquare icon and if array doesn't contain any object of answers redner native faSquare icon.

But, in relevant component renders same amount of icons as answer objects amount in array. example: if in array is 6 answer, component renders 6 icons. (I hope you know what I mean)

Can someone help me to write correctly iterated code which checks if there is 'truish' answer in any object of array or there is not or array is empty?

edit: let me edit my question and add some code I have fake back-end (JSON) and I .map it like that

     let posts = this.state.posts.map(singlePost => {
            return (
              <PresentationalComponent 
                 key={it doesn't matter}
                 text={singlePost.comment_description}
                 answerCheck={singlePost.post_comments.map(check => {
                  if (firstCheck.right_answered_by_post_author === true) {
                        return (
                            <FontAwesomeIcon style={{'color': 'green'}} icon= 
                  {faCheckSquare} />
                        )
                    }else {
                        return <FontAwesomeIcon style={{'color': 'green'}} icon= 
                  {faSquare} />
                    }
                  })}
                 />
)

post.comments   //is the thing which contains the array what I showed you in the start part of the post.

and I know that this is incorrect code for the thing what I want to do. It also doesn't contain what to do when array is empty. sorry for my bad formulation of question. thank you for help in advance.

Upvotes: 0

Views: 98

Answers (2)

Olawale
Olawale

Reputation: 46

you can loop through the array and check for the presence of the truthy value like this:

  let array = [
    {
      "comment_description": "hello, this is false answer",
      "right_answered_by_post_author": false
     },
     {
      "comment_description": "hello, this is true answer",
      "right_answered_by_post_author": true
     },
     {
      "comment_description": "hello, this is false answer",
      "right_answered_by_post_author": false
     }
    ]
    
    const check = () => {
      let reducedArray = array.map(obj => obj.right_answered_by_post_author)
      return reducedArray.includes(true) ? true : false
    }
This will return either true or false depending on the presence of a true value within the array. You can then bind your icon rendering to it.

Upvotes: 1

Japsz
Japsz

Reputation: 785

Since you described but aren't showing any code i'm guessing how your variables be like. This is my approach:

const  answersArray = [...objects]
if (answersArray.length){
    answersArray.filter((item) => item['right_answered_by_post_author']).length ? <CheckedGreenSquare/> : <UncheckedGreenSquare/>
} else <UncheckedNativeSquare/>

Hope it helps

Upvotes: 0

Related Questions