React is all about JavaScript. To make a website more functional and interactive with its user, JavaScript’s logic is a must to be added. JavaScript code can be declared inside a functional component and into the JSX.
JavaScript code into ReactJS Components
In this article, we will learn how to use JavaScript code in a ReactJS component and how to declare JavaScript code inside the functional component.
Prerequisites:
- A React Application (click here to know about creating a basic React Application)
- Knowledge about functional components (click here to know about components in React)
- How to pass and receive data with props between components (click here to know everything about props in ReactJS)
Pass data as attributes to a component
- Open App.js from src/App.js
//src/App.js import './App.css'; function App() { return ( <div className="App"> </div> ); } export default App;
- Import the components here and declare them in the JSX ( To know how to import and use a component in ReactJS, Read this article here.)
import Child from './components/Child';
return ( <div className="App"> {/* declare the components here */} <Child /> <Child /> <Child /> <Child /> <Child /> <Child /> </div> );
//src/App.js import './App.css'; // import Child.js from components folder import Child from './components/Child'; function App() { return ( <div className="App"> {/* declare the components here */} <Child /> <Child /> <Child /> <Child /> <Child /> <Child /> </div> ); } export default App;
- Declare some JavaScript objects in an array, inside the App function ( .src/App.js).
//src/App.js import './App.css'; // import Child.js from components folder import Child from './components/Child'; function App() { // declared an array of objects const dummyArray = [ { name: 'JavaScript', startFrom: new Date(2022, 6, 12).toLocaleDateString(), source: 'Codebun' }, { name: 'MERN Stack', startFrom: new Date(2022, 6, 17).toLocaleDateString(), source: 'Codebun' }, { name: 'Python', startFrom: new Date(2022, 7, 12).toLocaleDateString(), source: 'Codebun' }, { name: 'JavaScript', startFrom: new Date(2022, 7, 10).toLocaleDateString(), source: 'Codebun' }, { name: 'React Native', startFrom: new Date(2022, 7, 12).toLocaleDateString(), source: 'Codebun' }, { name: 'Next.js', startFrom: new Date(2022, 8, 2).toLocaleDateString(), source: 'Codebun' }, ] return ( <div className="App"> {/* declare the components here */} <Child /> <Child /> <Child /> <Child /> <Child /> <Child /> </div> ); } export default App;
- Send the data of the Array to
<Child />
component
return ( <div className="App"> {/* declare the components here and send the data as attributes to child component */} <Child title={dummyArray[0].name} date={dummyArray[0].startFrom} source={dummyArray[0].source} /> <Child title={dummyArray[1].name} date={dummyArray[1].startFrom} source={dummyArray[1].source} /> <Child title={dummyArray[2].name} date={dummyArray[2].startFrom} source={dummyArray[2].source} /> <Child title={dummyArray[3].name} date={dummyArray[3].startFrom} source={dummyArray[3].source} /> <Child title={dummyArray[4].name} date={dummyArray[4].startFrom} source={dummyArray[4].source} /> <Child title={dummyArray[5].name} date={dummyArray[5].startFrom} source={dummyArray[5].source} /> </div> ); }
//src/App.js import './App.css'; // import Child.js from components folder import Child from './components/Child'; function App() { // declared an array of objects const dummyArray = [ { name: 'JavaScript', startFrom: new Date(2022, 6, 12).toLocaleDateString(), source: 'Codebun' }, { name: 'MERN Stack', startFrom: new Date(2022, 6, 17).toLocaleDateString(), source: 'Codebun' }, { name: 'Python', startFrom: new Date(2022, 7, 12).toLocaleDateString(), source: 'Codebun' }, { name: 'JavaScript', startFrom: new Date(2022, 7, 10).toLocaleDateString(), source: 'Codebun' }, { name: 'React Native', startFrom: new Date(2022, 7, 12).toLocaleDateString(), source: 'Codebun' }, { name: 'Next.js', startFrom: new Date(2022, 8, 2).toLocaleDateString(), source: 'Codebun' }, ] return ( <div className="App"> {/* declare the components here and send the data as attributes to child component */} <Child title={dummyArray[0].name} date={dummyArray[0].startFrom} source={dummyArray[0].source} /> <Child title={dummyArray[1].name} date={dummyArray[1].startFrom} source={dummyArray[1].source} /> <Child title={dummyArray[2].name} date={dummyArray[2].startFrom} source={dummyArray[2].source} /> <Child title={dummyArray[3].name} date={dummyArray[3].startFrom} source={dummyArray[3].source} /> <Child title={dummyArray[4].name} date={dummyArray[4].startFrom} source={dummyArray[4].source} /> <Child title={dummyArray[5].name} date={dummyArray[5].startFrom} source={dummyArray[5].source} /> </div> ); } export default App;
Receive data as props from the parent component
- Pass props as an argument of the Child function and store the data in variables.
// src/components/Child.js import React from 'react'; // pass props as an argument here const Child = (props) => { return ( <div> </div> ); }; export default Child;
// store the data from props to variables const title = props.title; const date = props.date; const source = props.source;
// src/components/Child.js import React from 'react'; // pass props as an argument here const Child = (props) => { // store the data from props to variables const title = props.title; const date = props.date; const source = props.source; return ( <div> </div> ); }; export default Child;
- Write some HTML codes inside
<div>...</div>
and pass down the declared variables there.
// src/components/Child.js import React from 'react'; // pass props as an argument here const Child = (props) => { // store the data from props to variables const title = props.title; const date = props.date; const source = props.source; return ( <div> <div> <h2>{title}</h2> <h4>Start from: {date}</h4> <h5>Source: <a href="https://codedec.com">{source}</a></h5> </div> </div> ); }; export default Child;
The preview would be something like this,
Let’s add some CSS styles to this page.
- Open App.css file and let’s make it a grid layout.
.App { text-align: center; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 70px 30px; }
- Go to the Child component and add some inline styles
style={{ border: "2px solid black", borderRadius: "8px" }}
// src/components/Child.js import React from 'react'; // pass props as an argument here const Child = (props) => { // store the data from props to variables const title = props.title; const date = props.date; // console.log(date) const source = props.source; return ( <div style={{ border: "2px solid black", borderRadius: "8px" }}> <div> <h2>{title}</h2> <h4>Start from: {date}</h4> <h5>Source: <a href="https://codedec.com">{source}</a></h5> </div> </div> ); }; export default Child;
Conclusion
In summary, adding JavaScript and using it in a ReactJS application is very simple as React itself is a framework of JavaScript. Just declare the JavaScript codes and functions inside the component function and use it as per need inside JSX.