@Dhiraj’s answer is correct, and for convenience you can use the autoFocus prop to have an input automatically focus when mounted:
<input autoFocus name=...
Note that in jsx it’s autoFocus
(capital F) unlike plain old html which is case-insensitive.
Related Contents:
- The useState set method is not reflecting a change immediately
- Pass props to parent component in React.js
- babel-loader jsx SyntaxError: Unexpected token [duplicate]
- How to handle the `onKeyPress` event in ReactJS?
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- Concatenating variables and strings in React
- Can I set state inside a useEffect hook
- Is there any downside to using .tsx instead of .ts all the times in typescript?
- Await is a reserved word error inside async function
- ReactJS and images in public folder
- Detecting production vs. development React at runtime
- Warning: Unknown DOM property class. Did you mean className?
- Recommended way of making React component/div draggable
- ReactJS: “Uncaught SyntaxError: Unexpected token
- Import JSON file in React
- How to import image (.svg, .png ) in a React Component
- How to allow for webpack-dev-server to allow entry points from react-router
- What is the best way to deal with a fetch error in react redux?
- ‘string’ can’t be used to index type ‘{}’
- what’s data-reactid attribute in html?
- Avoid no-shadow eslint error with mapDispatchToProps
- How to style material-ui textfield
- What is StrictMode in React?
- React create constants file
- Warning: This synthetic event is reused for performance reasons happening with
- How to call an async function inside a UseEffect() in React?
- React Transferring Props except one
- Object is not extensible error when creating new attribute for array of objects
- What does the at symbol (@) do in ES6 javascript? (ECMAScript 2015)
- Cannot get material-ui datepicker to work
- Jest react testing: Check state after delay
- How to find dead code in a large react project?
- Cannot flush updates when React is already rendering
- react lifecycle methods understanding
- How to add delay in React.js?
- How do I wrap a React component that returns multiple table rows and avoid the ” cannot appear as a child of ” error?
- Why IE 11 display blank page rendering react app
- ES2015 module syntax is preferred over custom TypeScript modules and namespaces @typescript-eslint/no-namespace
- Next.js is not recognizing ‘@types/react’
- What is “npm run build” in create-react-app?
- Get Webpack not to bundle files
- How to add or remove a className on event in ReactJS?
- having multiple instance of same reusable redux react components on the same page/route
- NextJS – Appending a query param to a dynamic route
- Passing a number to a component
- How to update webpack config for a react project created using create-react-app?
- How to hide navbar in login page in react router
- This.props.dispatch not a function – React-Redux
- Webpack 5 – Uncaught ReferenceError: process is not defined
- Where to put utility functions in a React-Redux application?