To pass data from a child to a parent component in React: Pass a function as a prop to the Child component. Call the function in the Child component and pass the data as arguments. Access the data in the function in the Parent. import {useState} from ‘react’; function Child({handleClick}) Read more…
First, you need to confirm node.js, npm and nginx have been installed on your server. We’ll skip this step. Second, swith to your project directory, run the following command. npm run build or yarn build (if you have installed yarn) Then, adit the config file /etc/nginx/nginx.conf worker_processes 1; events { Read more…
Today I tried to get data from the back end by calling a GET request, and then saved it to the state. But it caused an endless loop that kept sending requests. The code is as follows const [article, setArticle] = useState(); axios.get(url).then(({data}) => { setArticle(data) }) Solution: Use useEffect Read more…
Download dependency. yarn add react-markdown yarn add remark-gfm yarn add rehype-raw yarn add react-syntax-highlighter yarn add github-markdown-css Use fetch to fetch the contents of a Markdown file and render it using react-markdown. import React from ‘react’; import ReactMarkdown from ‘react-markdown’; const App=({url})=>{ const [mdContent, setMdContent] = useState(”) useEffect(() => { Read more…
import React, { useState } from “react”; const App = () => { const [inputs, setInputs] = useState([]); return ( <div> <div> <label>Inputs:</label> {inputs.map((n) => ( return( <p> this paragraph {n}</p> ) )} </div> </div> ); }; export default App;
In v6.4, new routers were introduced that support the new data APIs: createBrowserRouter createMemoryRouter createHashRouter The following routers do not support the data APIs: <BrowserRouter> <MemoryRouter> <HashRouter> <NativeRouter> <StaticRouter> This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage Read more…