How to automatically add a filter depending on Boolean value in JSON file

Question

I have a JSON file:

[
 {
 "id": 1,
 "img": "https://example.jpg",
 "availability": false
 },
 {
 "id": 2,
 "img": "https://example.jpg",
 "availability": true
 }
]

What I would like to achieve is for the JSON with availability : false to automatically have a filter applied to it. This is the filter I want to apply and I would like to apply it to the img with the className="tile-image":

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

This is my code so far:

 import React, { Component } from 'react';
 import './styles.css'

 class GetOnlinePosts extends Component {
  constructor(props){
    super(props);
    this.state = {
        error : null,
        isLoaded : false,
        posts : []          
    };
}
componentDidMount(){
    fetch("https://api.myjson.com")
    .then( response => response.json())
    .then(
        (result) => {
            this.setState({
                isLoaded : true,
                posts : result
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            })
        },
    )
}
render() {
    const {error, isLoaded, posts} = this.state;
    const orderedPosts = [...posts.filter((post) => post.availability), ...posts.filter((post) => !post.availability)]
    if(error){
        return <div>Error in loading</div>
    }else if (!isLoaded) {
        return <div>Loading ...</div>
    }else{
        return(
            <div>
                <div className="tiles">
                {
                    orderedPosts.map(post => (
                        <div key={post.id}>
                         <div className="tile">
                                <img className="tile-image" src={post.img} alt=""/>
                         </div> 
                    </div>
                    ))
                }
                </div>
            </div>
        );
       }
     }
   }

export default GetOnlinePosts;

Any help on how to get the filter on to the JSON with a false availability would be great.

Possible duplicate of [React Js conditionally applying class attributes](https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes) — Emile Bergeron, Nov 27 '19 at 16:11

Wojciech Dynus · Answer 1 · 2019-11-28T09:31:25.657

2

The easiest I think would be to add some class, let's say unavailable to the image that is unavailable.

{orderedPosts.map(post => (
        <div key={post.id}>
            <div className="tile">
                <img className={`tile-image ${!post.availability ? "unavailable" : ""}`} src={post.img} alt=""/>
            </div> 
        </div>
    ))
}

and then in your CSS:

.unavailable {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

edited Nov 28 '19 at 09:31

answered Nov 27 '19 at 15:49

Wojciech Dynus

911
5
11

Hello, unfortunately this hasn't worked for me. It says Parsing error: Unterminated template. – RH2019 Nov 28 '19 at 09:24
Ah, sorry - there were 2 typos in my code - just edited it. Check the current one - should be fine now – Wojciech Dynus Nov 28 '19 at 09:31

score 2 · Answer 2 · answered Nov 27 '19 at 15:51

2

have you though about adding css class

   .is-available {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

and then in component do

 <div className="tile">
  <img className={`tile-image ${availability && "is-active"} `} src={post.img} alt=""/>
 </div>

answered Nov 27 '19 at 15:51

ErBu

355
2
7

I changed this: to this and it worked, thanks for the help:) – RH2019 Nov 28 '19 at 09:36
No problem happy to help. – ErBu Nov 28 '19 at 09:37

score 1 · Answer 3 · answered Nov 27 '19 at 15:47

You can do conditional rendering where it checks if availability= false it will add inline style [or you can add a class]

   <div className="tiles">
        {
            orderedPosts.map(post => (
                <div key={post.id}>
                 <div className="tile">
                        <img className="tile-image" src={post.img} 
                          style={{
                          '-webkit-filter': !post.availability ? 'grayscale(100%)' : 'none;
                          filter: !postavailability ? 'grayscale(100%)' : 'none';
                          }}
                          alt=""/>
                 </div> 
            </div>
            ))
        }
        </div>

How to automatically add a filter depending on Boolean value in JSON file

3 Answers3