I'm trying to render a card when it's a cat with a purple background and a card with a background blue when it's a dog based on type. the card is designed to be unique to each animal.

dog card cat card

json file

"animals": [
    {
      "id": 1,
      "type": "Cat",
      
    },
    {
      "id": 2,
      "type": "Dog",
      
    }
  ]

AnimalAdopt.tsx

const AnimalAdopt = ({ animals }) => {

return (
    <Card className="list-group">
        {animals.map((animals) => (
            <DogCard>

                <HeaderContainer>
                    <HeaderCard>
                        <Image>
                            <img src={animals.photo} width='120px' height='120px' alt='Picture of a cute dog' />
                        </Image>
                
                        <Name>{animals.name}</Name>
                       
                    </HeaderCard>
                </HeaderContainer>

App.tsx

const url = 'http://localhost:3000/pets';
function App() {


  const [animals, setanimals] = useState(null);

  useEffect(() => {
    axios.get(url).then((result) => {
      setanimals(result.data);
    });
  }, []);

  return (

    <div>
      < Header />
      {animals ? <AnimalAdopt animals={animals} /> : < Loading />}
    </div>


  );
}

export default App;

CodePudding user response：

    "animals": [
        {
          "id": 1,
          "type": "Cat",
    "color":"xyz color code"
          
        },
        {
          "id": 2,
          "type": "Dog",
    "color":"xyz color code"
          
        }
      ]

AnimalAdopt.tsx

const AnimalAdopt = ({ animals }) => {

return (
    <Card className="list-group">
        {animals.map((animal) => (
            <DogCard style={{backgroundColor:`${animal.color}`}}>

                <HeaderContainer>
                    <HeaderCard>
                        <Image>
                            <img src={animal.photo} width='120px' height='120px' alt='Picture of a cute dog' />
                        </Image>
                
                        <Name>{animal.name}</Name>
                       
                    </HeaderCard>
                </HeaderContainer>

CodePudding user response：

"animals": [ { "id": 1, "type": "Cat", "color":"xyz color code"

    },
    {
      "id": 2,
      "type": "Dog",
"color":"xyz color code"
      
    }
  ]

AnimalAdopt.tsx

const AnimalAdopt = ({ animals }) => {

return ( {animals.map((animal) => ( <DogCard style={{backgroundColor:${animal.color}}}>

            <HeaderContainer>
                <HeaderCard>
                    <Image>
                        <img src={animal.photo} width='120px' height='120px' alt='Picture of a cute dog' />
                    </Image>
            
                    <Name>{animal.name}</Name>
                   
                </HeaderCard>
            </HeaderContainer> 

or you can use simple way like that

"animals": [ { "id": 1, "type": "Cat",

},
{
  "id": 2,
  "type": "Dog",
  
}

] AnimalAdopt.tsx

const AnimalAdopt = ({ animals }) => {

return ( {animals.map((animals) => ( <DogCard style={{backgroundColor:#${Math.floor(Math.random()*16777215).toString(16)}}}>

            <HeaderContainer>
                <HeaderCard>
                    <Image>
                        <img src={animals.photo} width='120px' height='120px' alt='Picture of a cute dog' />
                    </Image>
            
                    <Name>{animals.name}</Name>
                   
                </HeaderCard>
            </HeaderContainer>