How to conditional render a class in .map with react/typescript-CodePudding

I have mapped and filtered through this object and I want to conditionally render a class based off the text that is outputted. In this case I want it to be the text "Ms". Is there a way of doing this within the .mapped object?

I've tried using regex. I've tried queryselecterAll. I've tried for each loop.

I feel like there is some logic im missing here.

This is mapped object

const [data, setData] = useState(false);
  const [searchUser, setSearchUser] = useState("");

useEffect(() => {
    setLoading(true);

    const fetchList = async (): Promise<UsersList> => {
      const result: any = await fetch("https://randomuser.me/api/?results=20")
        .then((res) => res.json())
        .then((data) => {
          setData(data);
          setLoading(false);
          console.log(data);
        });

      return result;
    };
    fetchList();
  }, []);

the class

.title {
background-color: blue;

}

mapped object

{data?.results
            .filter((val: any) => {
              if (searchUser === "") {
                return val;
              } else if (
                val.name.first.toLowerCase().includes(searchUser.toLowerCase())
              ) {
                return val;
              } else if (
                val.email.toLowerCase().includes(searchUser.toLowerCase())
              ) {
                return val;
              } else if (
                val.location.city
                  .toLowerCase()
                  .includes(searchUser.toLowerCase())
              ) {
                return val;
              }
            })
            .map((d: any) => 

            (
              <div
                style={hoverStyle}
                className="text-blue-900 ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300  border-white shadow-slate-500 bg-white hover:opacity-95 rounded-lg container p-5"
              >
                <img
                  className="rounded-full w-44 h-44 "
                  src={d.picture.large}
                />
                <h2 className="">{d.name.title}</h2>

CodePudding user response：

You can do it inline

style={{background-color: d.name.title==='Ms' ? blue : white }}

CodePudding user response：

objects.map((object) => (
     <>
 <div className={object.name === 'Ms' ? 'classA' : 'classB'}>Ms</div>
    </>
   )
  ))