React Hooks useState String Array with TypeScript All In One

React Hooks useState String Array with TypeScript All In One

React & TypeScript

  // const [sparkle, setSparkle] = useState([]);
  // const [sparkle, setSparkle] = useState([] as string[]);
  const [sparkle, setSparkle] = useState<string[]>([]);

demo

import React, { useEffect, useState } from 'react';

// import './sparkle.scss';
import './sparkle.css';

function Sparkle() {
  // const [sparkle, setSparkle] = useState([]);
  // const [sparkle, setSparkle] = useState([] as string[]);
  const [sparkle, setSparkle] = useState<string[]>([]);
  const addSparkle = () => {
    const arr = [...sparkle];
    arr.push(`✨`);
    setSparkle(arr);
  };
  useEffect(() => {
    console.log(`update sparkle`, sparkle);
  }, [sparkle]);
  return (
    <>
      <button
        onClick={addSparkle}
        style={{
          color: "#0ff",
          cursor: "pointer",
          fontSize: "16px",
        }}>
        Add Sparkle
      </button>
      <div className="sparkle-box">
        {
          sparkle.map((item, i) => {
            return (
              <span className='sparkle-item' key={i}>{item}</span>
            )
          })
        }
      </div>
    </>
  )
}

export default Sparkle;

CRA & SCSS

$ npm install sass
# or
$ yarn add sass

https://create-react-app.dev/docs/adding-a-sass-stylesheet

refs

https://bobbyhadz.com/blog/react-usestate-string-array-typescript

https://bobbyhadz.com/blog/react-typescript-usestate-array-of-objects

https://stackoverflow.com/questions/56918950/displaying-an-array-received-from-usestate-hook-with-typescript

https://reactjs.org/docs/lists-and-keys.html#keys

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---