React Native - change color based on api value

Question

i'm making a React Native project, and basically, i wanted to change a styled component background color based on the value of the api, but no idea how i'll make this

(i'm using: React Native, Expo, typescript and styled components)

i wanted the ContainerRating (which is a styled component) background turn to green if levelRiskMorse in API is equal to "NoRisk"

This is the api server.json:

 "allTasks": [
        {          
            "patientName": "PacientOne",
            "taskName": "Walk",
            "executors": "Person3 - Doctor",
            "institutionName": "IntitutionName",
            "generalObservations": "Observations Test",
            "planType": "1588",
            "time": "07:00",
            "risk": true,
            "levelRiskMorse": "NoRisk",
            "levelRiskBarden": "Low"
        },

this is a fake API !

Component itself and the styles.ts:

[...]

const [risk, setRisk] = useState('');

//fetching data

    useEffect(() => {                            
        async function getRiskLevel(){
            const { data } = await api.get('allTasks');
            const response = data.forEach((item: any | undefined) => {
                return item.levelRiskMorse
            })
            setRisk(response);
        }
        getRiskLevel();
           
    }, [])


 return(
<View>
 <ContainerRating> // if levelRiskMorse === "NoRISK" color turn to green
    <Text>Sem Risco</Text>
    <Text>0-24</Text>
 </ContainerRating>                         
</View> 
               
    )
}

export const ContainerRating = styled.View`
    border-width: 0.6px;
    border-color: ${({theme}) => theme.colors.default_color};
    flex-direction: row; 
    justify-content: space-around;                               
    height: 50px;
    align-items: center;
    margin-top: 2px;
    border-left: unset;
`;

sorry if i didn't make it clear, im not used to ask questions here

Stefano Leone · Accepted Answer · 2022-08-08 18:49:34Z

1

Simple do something like:

<ContainerRating style={{color: levelRiskMorse==="NoRISK" ? 'green' : defaultColor }}
     <Text>Sem Risco</Text>
     <Text>0-24</Text>
</ContainerRating>

What's happening? I'm applying a style object directly in the component (every component has this property). levelRiskMorse==="NoRISK" it's an if condition inline. If it is true, 'green' will be set, otherwise a default color variable you want to use.

answered Aug 8, 2022 at 18:49

Stefano Leone

7037 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matheus Chiarelli Over a year ago

sure, but how i get the "levelRiskMorse" value properly? i'm fetching the data in useEffect but i don't know if this is the right way to get a value from an array of objects.

Stefano Leone Over a year ago

First of all, you set risk variable as a string, but it seems you wanna give it an array of string, so initialize it with const [risk, setRisk]=useState<string[]>([]). Then, use the setRisk method to give it the array of string (I would use the map method to fill it). Then use another map method inside the return() and check wheter the item is equals to that string. I cannot give you a lot of informations because this is another question which you should open. For more info refer to the map method.

Collectives™ on Stack Overflow

React Native - change color based on api value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related