Below, we have a Blog component that renders a dropdown.
import React, { useState, useEffect } from "react"\nimport axios from "axios"\n\nconst Blog = () => {\n const [blogId, setBlogId] = useState("")\n const [post, setPost] = useState([])\n\n useEffect(() => {\n ;(async () => {\n const { data } = await axios.get(\n `https://jsonplaceholder.typicode.com/posts/${blogId}`\n )\n setPost(data)\n })()\n }, [blogId])\n\n const handleBlogPostChange = event => {\n setBlogId(event.target.value)\n }\n\n return (\n <div className="m-5">\n <div className="mb-5">\n <label htmlFor="blog">Choose a blog post:</label>\n <select name="blog" id="blog" onChange={handleBlogPostChange}>\n <option value="1">Blog Post 1</option>\n <option value="2">Blog Post 2</option>\n <option value="3">Blog Post 3</option>\n <option value="4">Blog Post 4</option>\n </select>\n </div>\n\n <div className="card col-md-6">\n {post && <div className="card-body">{post.title}</div>}\n </div>\n </div>\n )\n}\n\nexport default BlogThe resulting UI looks like this:
\n