SHARE
TWEET

Untitled

a guest Jun 15th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function App() {
  2.   const [showApplicants, setShowApplicants] = useState(false);
  3.   const [showSpecificApplicant, setShowSpecificApplicant] = useState([]);
  4.   const [applicants, setApplicants] = useState([
  5.     {
  6.       firstName: "Billy",
  7.       background: "Employed",
  8.       id: 1
  9.     },
  10.     {
  11.       firstName: "Sarah",
  12.       background: "Employed",
  13.       id: 2
  14.     },
  15.     {
  16.       firstName: "Vera",
  17.       background: "Student",
  18.       id: 3
  19.     },
  20.     {
  21.       firstName: "Albert",
  22.       background: "Unemployed",
  23.       id: 4
  24.     }
  25.   ]);
  26.  
  27.   const transitions = useTransition(applicants, item => item.id, {
  28.     from: {
  29.       transform: "translate(-100%, 0)"
  30.     },
  31.     enter: {
  32.       transform: "translate(0%,0)"
  33.     },
  34.     leave: {
  35.       transform: "translate(150%, 0)"
  36.     },
  37.     config: { duration: 3000 }
  38.   });
  39.  
  40.   const handleApplicants = () => {
  41.     setShowApplicants(!showApplicants);
  42.     setShowSpecificApplicant([]);
  43.   };
  44.  
  45.   const showDetails = (e, item) => {
  46.     setShowSpecificApplicant(item.id);
  47.   };
  48.  
  49.   const SpecificApplicant = () => {
  50.     const matchedUser = applicants.find(
  51.       user => user.id === showSpecificApplicant
  52.     );
  53.     return transitions.map(({ item, key, props }) => {
  54.       return showSpecificApplicant === item.id ? (
  55.         <animated.div key={key} style={props}>
  56.           <div
  57.             style={{
  58.               background: "lightblue",
  59.               width: "20%",
  60.               margin: "0 auto",
  61.               textAlign: "center",
  62.               borderRadius: "5px",
  63.               padding: "10px",
  64.               display: "flex",
  65.               flexDirection: "column"
  66.             }}
  67.           >
  68.             <h3 style={{ margin: "0", padding: "0" }}>
  69.               {matchedUser.firstName}
  70.             </h3>
  71.             <p> Current Status: {matchedUser.background}</p>
  72.           </div>
  73.         </animated.div>
  74.       ) : null;
  75.     });
  76.   };
  77.  
  78.   return (
  79.     <div className="App">
  80.       <h1>Hello</h1>
  81.       <button onClick={handleApplicants}> Show Applicants </button>
  82.       <ul>
  83.         {showApplicants &&
  84.           applicants.map(item => (
  85.             <button onClick={e => showDetails(e, item)}>
  86.               {item.firstName}
  87.             </button>
  88.           ))}
  89.       </ul>
  90.       <SpecificApplicant />
  91.     </div>
  92.   );
  93. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top