I'm currently working on a React Native project and I have a requirement to dynamically change the background color of a styled component based on the value retrieved from an API. However, I'm facing some challenges in implementing this feature.
The technologies I am using for this project include React Native, Expo, TypeScript, and styled components.
My goal is to have the background color of the ContainerRating component (which is a styled component) turn green if the levelRiskMorse value in the API response is equal to "NoRisk".
Here is a snippet of the server.json API:
"allTasks": [
{
"patientName": "PatientOne",
"taskName": "Walk",
"executors": "Person3 - Doctor",
"institutionName": "InstitutionName",
"generalObservations": "Observations Test",
"planType": "1588",
"time": "07:00",
"risk": true,
"levelRiskMorse": "NoRisk",
"levelRiskBarden": "Low"
},
This API shown here is just for demonstration purposes!
Below are the relevant code snippets of the component itself and its corresponding styles:
[...]
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> // Change color to green if levelRiskMorse === "NoRISK"
<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;
`;
Apologies if my question was not very clear, I'm still getting used to asking questions in this format.