How to get text inside Text component onPress in ReactJS ?
Last Updated :
03 Oct, 2022
In this article, we will learn "How to get the text inside Text component onPress in ReactJS?".
Problem Statement: Sometimes in an application, it is required to get the text inside certain components, in order to reuse the components again & again just by changing the text value.
Approach: We will set the property inside the component's tag to which we want to send text, then inside that component, we will use props to get that text value and use it inside the return statement to print that text to the browser.
Implementation: Below is the step-by-step implementation of the above approach.
Creating React Project:
Step 1: To create a react app you need to install react modules through npx command. “npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once.
npx create-react-app project_name
Step 2: After creating your react project move into the folder to perform different operations.
cd project_name
Step 3: Open the folder inside the code editor, and delete all the files inside the "src" folder except the index.js file, and all the files inside the public folder. Now, open the terminal and type the following command to create "index.html" files in the public folder:
cd public
touch index.html
And "App.js" and "Text.js" in the src folder:
cd src
touch App.js Text.js
Project Structure: We have a simple project structure, we have a package.json & package-lock.json file which contains the details about the module installed inside this project. Then we have node_modules which contains the actual module and an "index.js" file inside "src", our main server file. We also have "App.js" and "Text.js" file which is React.js component files.
Example:
- public/index.html: This is a basic HTML code, inside we have an "id" root when you open the "index.js" file you will see that the react mount everything to this id everything we do inside our components will show here.
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
- src/App.js: By default "index.js" mount the App component which we just deleted, so let's create "App.js" components. Components in React.js are nothing but a function that returns HTML tags. Let's make a function that returns the h1 heading, "Geeks For Geeks" and a component 'Text.js'. We want to pass text inside the Text component, so inside the App component, inside App() function, inside the return statement, and in the Text tag give a property text and set it to the string you want to get inside the Text component.
src/App.js
import Text from "./Text";
function App() {
return (
<div>
<h1>Geeks For Geeks</h1>
< Text text="How to get text inside
Text component onPress in ReactJS" />
</div>
);
}
export default App;
- src/Text.js: Let's create another component Text component. Then in order to get that value inside the Text component, we have to use props, we have to write props inside the function of the Text component as an argument, then we can use it where we want using the property name we specified inside Text tag like "props.text".
src/Text.js
function Text(props) {
return (
<div>
<h3>{props.text}</h3>
</div>
);
}
export default Text;
Steps to Run: Open the terminal, and type the following command to run the application
npm start
Output:
The output shows that the data we set inside the text property of the Text tag will send to the Text Component and then we get that data to the Text component, pass that data into an h3 heading and send it back to the browser, that's why it is visible to us.
Similar Reads
How to create a Read More component in ReactJS?
Creating a Read More component in React JS refers to hiding and displaying the text content on the page. It can be achieved by setting the state variable and display the content accordingly. PrerequisitesNode.JS and npmReact JSReact JS useState() hookApproachTo create a Read More component in React
3 min read
How to put ReactJS component inside HTML string ?
Putting the React JS component inside the HTML library is not recommended and may lead to conflict in React lifecycle methods. But it can be done by parsing the HTML String into DOM using the html-to-react module. html-to-react is a lightweight library that is responsible for converting raw HTML to
3 min read
How to use Popper Component in ReactJS ?
A Popper is used to show the part of the content on top of another. It's an alternative feature for react-popper. Material UI for React has this component available for us, and it is simple and very easy to integrate. For perfect positioning, it uses 3rd party library which is Popper.js.Prerequisite
3 min read
How to add Event Listeners to wrapped Component in ReactJS ?
React provides a powerful way of DOM manipulation by introducing the concept of virtual DOM. It is mainly used to build single-page applications. There are times when you need to add event listeners. This can be achieved by using the concept of forwarding refs and leveraging React's lifecycle method
2 min read
How to set Parent State from Children Component in ReactJS?
To set the parent state from a child component, we use React’s unidirectional data flow. Instead of directly passing data, we pass a function that enables the child to send data back to set the parent state.Prerequisites:React JSuseState HookApproachTo set parent state from child component in React,
2 min read
How to update the State of a component in ReactJS ?
To display the latest or updated information, and content on the UI after any User interaction or data fetch from the API, we have to update the state of the component. This change in the state makes the UI re-render with the updated content. Prerequisites: NPM & Node.jsReact JSReact StateReact
3 min read
How to use Paper Component in ReactJS ?
In Material Design, the physical properties of paper are translated to the screen. Material UI for React has this component available for us and it is very easy to integrate. We can use the Paper Component in ReactJS using the following approach. Prerequisites:React JSMaterial UIApproachTo use Paper
2 min read
How to get the enter key in ReactJS ?
Let us create a React project and then we will create a UI that takes input from users. Users can interact with the UI and press Enter Key to trigger an event through this. Approach:Enter Key in React JS comes in the KeyDown Event. To get the enter key we check the event to verify which key is press
2 min read
How to Set Text Color in ReactJS ?
React provides you the ability to create interactive and dynamic useÂr interfaces. Within these interfaces, the choice of text color holds significant importance as it enhanceÂs the visual appeal and engageÂment for users. A foundational aspect of styling revolveÂs around modifying text color. In t
3 min read
How to create components in ReactJS ?
Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C
3 min read