How to use JavaScript code into ReactJS Components

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.