Component
function OurValues() {
const [values, setValues] = useState([]);
useEffect(() => {
const dataFetch = async () => {
const data = await (
await fetch(
"https://some.api"
)
).json();
setValues(data);
};
dataFetch();
}, [])
const data = [
{
icons: hands,
ourValues: 'Respect for people',
valuesDescriptionEN: values.respect_description_en,
valuesDescriptionNO: values.respect_description_no
},
{
icons: chart,
ourValues: 'Improvement',
valuesDescriptionEN: values.improvment_description_en,
valuesDescriptionNO: values.improvment_description_no
},
{
icons: leader,
ourValues: 'Leadership',
valuesDescriptionEN: values.leadership_description_en,
valuesDescriptionNO: values.leadership_description_no
},
{
icons: group,
ourValues: 'Working together',
valuesDescriptionEN: values.working_description_en,
valuesDescriptionNO: values.working_description_no
},
];
return (
<section className='bg-gradient-to-r from-[#FFFFFF] to-[#E0ECF0] flex flex-row justify-center'>
<div className='px-[20px] py-[50px] sm:px-[48px] sm:py-[56px] lg:px-[140px] lg:py-[80px] max-w-[1440px]'>
<h2 className='mb-[64px] text-center sm:text-left'>Our values</h2>
<div className="grid grid-cols-1 gap-[40px] lg:grid-cols-2">
{
data.map((list, index) => (
<div key={index} className='w-full flex flex-col gap-[40px] sm:flex-row'>
<img className='place-self-center h-[60px] w-[60px] sm:self-start' src={list.icons} alt='icon' />
<div className='flex flex-col gap-[16px]'>
<h3 className='text-center sm:text-left'>{list.ourValues}</h3>
<p className='font-jostNormal font-normal break-words text-[16px] text-center sm:text-left'></p>
</div>
</div>
))
}
</div>
</div>
</section>
);
}
export default OurValues;
I cannot assign a fixed width with height, because the elements must be responsive. How can I solve this problem with CLS?
I wanted to render the page with static and dynamic data at once so that the layout would not be distorted. I tried not to load the component until the data is received, but then other static components are loaded. Or maybe the problem is that I'm mapping data from an array that has static variables assigned and only sub-dynamic variables from the usestate hook?
