Steps to Create a React Project
Step 1: Create a react application by typing the following command in the terminal.
npx create-react-app project_name
Step 2: Now, go to the project folder i.e. project_name by running the following command.
cd project_name
Project Structure:
Example: This example implements dynamic state changes on click by taking the user input.
Javascript
// Filename - App.js import React, { Component } from "react" ; class App extends Component { constructor() { super (); this .state = { name: "" , value: " " , }; } render() { return ( <div> <p>Enter State Name:</p> <input onChange={(e) => { this .setState({ name: e.target.value, }); }} type= "text" ></input> <p>Enter State Value:</p> <input onChange={(e) => { this .setState({ value: e.target.value, }); }} type= "text" ></input> <br /> <br /> <button onClick={() => { this .setState({ [ this .state.name]: this .state.value, }); }} > Create a dynamic state </button> { this .state[ this .state.name] ? ( <p> { this .state.name}: { this .state[ this .state.name]} </p> ) : null } </div> ); } } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser window.
How to set state with a dynamic key name in ReactJS ?
When working with ReactJS, managing state is a fundamental aspect of building dynamic and interactive user interfaces. In some cases, you may encounter situations where you need to set a state with a dynamic key name, rather than a fixed one. This can be particularly useful when dealing with dynamic data or when you want to update the state based on user input or other dynamic factors.
Contact Us