How to present Axios data as list

Question

I have an API request from my backend to ReactJS frontend. The results is presented in JSON format. When the user press the "submit" button, I want the JSON data only for a specific key of the array of each object to presented to the user in nice list format.

1. First code snippet is the JSON code
2. Second code is my AXIOS code
3. Third code is my ReactJS frontend code with the button and etc.
4. The picture is how it looks when the user press the button.

I need it in list format. Meaning each entry on a new line. Currently it jumbos everything to one list

Any thoughts?

  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  }


const App = () =>{
  const [buttonTitle, setButtonTitle] = useState("User Data Prior To Change")

    const getAPI = ()=>{
      const loopList = []
      const url = "https://jsonplaceholder.typicode.com"

      axios.get(`${url}/posts`)
      .then((response)=>{
            const myValue = response.data
             myValue.forEach(myValueValues => {loopList.push(myValueValues['title'])})
             setButtonTitle(loopList)
          })
        .catch(error => console.error(`Error: ${error}`))
      }




       <h1>Click button to see list of user</h1>
        <button onClick={getAPI}>Button to press to see all info in clean format
</button>
        <ul>
          <li>{buttonTitle}</li>
        </ul>

picture of current output. I need it in a nice list readable format

Answer 1

No, you'll have to write these by hand. See more here.

Of course, you could write a code-gen tool if you have a lot of these, but it seems like an overkill.

Answer 2

As mentioned in the other, correct, answer, there is no such feature provided by the language, and microsoft/TypeScript#15480 is the relevant open feature request.

If you are using TypeScript 4.5+, and your ranges are non-negative whole numbers less than 1000 and you don't mind making the compiler go through a lot of effort to calculate small numbers, you can use a recursive conditional type that use variadic tuples to build up arrays of arrays of varying lengths, and then get a union of those lengths:

type LessThan<N extends number, A extends any[] = []> =
  N extends A['length'] ? A[number] : LessThan<N, [...A, A['length']]>

type NumericRange<F extends number, T extends number> = 
  Exclude<T | LessThan<T>, LessThan<F>>

You can try it on your Days type, and it works:

type Days = NumericRange<1, 31>
/* type Days = 1 | 31 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 
   16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 */

Note that union ordering is an implementation detail, and the compiler tends to put types it's already seen before earlier in the union, so this is correct (every number from 1 to 31 is present) but weird (since the 31 shows up after the 1 and before the 2).

Of course if you're only using it once, to create Days then it's definitely not worth it, since there are more characters in the implementation of NumericRange than there are in writing out the Days type manually.

Playground link to code