Passing function result into a JSON file

So i was given task to build similarity-checker based on react.js
then i was puzzled to display the result , can anyone help me 🙂 .
any help will be great.
this my code :

App.js

import './App.css';
import DisplayData from './display';
import React from 'react';
let input = React.createRef() ;
function handleSubmit(){
  var x =(input.current.value);
  input.toString();
  var stringSimilarity = require("string-similarity")
  let mapel = require('./data-mapel.json')
  const a = (JSON.stringify(mapel[0]))
  var Similarity1= stringSimilarity.compareTwoStrings(x,a)*100
  const result1=Similarity1
  const b = (JSON.stringify(mapel[1]))
  var Similarity2= stringSimilarity.compareTwoStrings(x,b)*100
  const result2=Similarity2
  const c = (JSON.stringify(mapel[2]))
  var Similarity3= stringSimilarity.compareTwoStrings(x,c)*100
  const result3=Similarity3
  const d = (JSON.stringify(mapel[3]))
  var Similarity4= stringSimilarity.compareTwoStrings(x,d)*100
  const result4=Similarity4
  const e = (JSON.stringify(mapel[4]))
  var Similarity5= stringSimilarity.compareTwoStrings(x,e)*100
  const result5=Similarity5
  const f = (JSON.stringify(mapel[5]))
  var Similarity6= stringSimilarity.compareTwoStrings(x,f)*100
  const result6=Similarity6
  const g = (JSON.stringify(mapel[6]))
  var Similarity7= stringSimilarity.compareTwoStrings(x,g)*100
  const result7=Similarity7
  const h = (JSON.stringify(mapel[7]))
  var Similarity8= stringSimilarity.compareTwoStrings(x,h)*100
  const result8=Similarity8
  const i = (JSON.stringify(mapel[8]))
  var Similarity9= stringSimilarity.compareTwoStrings(x,i)*100
  const result9=Similarity9
  const all = [result1,result2,result3,result4]
}
function App() {
return (
  <div className="App">
    <div className="container">
    <h1 className="px-2 py-2">Similarity Checker</h1>
    <form>
    <div className="form-group">
          <label htmlFor=""></label>
          <input type="text" className="form-control" name="input" placeholder="Masukkan Kata" ref={input} />    
          &nbsp;&nbsp;
          <button type="submit" className="buttona" onClick={handleSubmit}>Enter</button>
        </div>
    </form>
    <br></br>
      <center>
      <DisplayData/>
      </center>
    </div>
    </div>
);

}
export default App;

DisplayData.js

import React from "react";
import Mapel from './data-mapel.json'
import "react-table";
function DisplayData() {
    const DisplayMapel=Mapel.map(
    (data)=>{
        return(
            <tr>
                <td>
                    {data["mapela"]}
                    {data["mapelb"]}
                    {data["mapelc"]}
                    {data["mapeld"]}
                    {data["mapele"]}
                    {data["mapelf"]}
                    {data["mapelg"]}
                    {data["mapelh"]}
                    {data["mapeli"]}
                </td>
                <td>
                    =
                </td>
                <td>
                    {data["resulta"]}
                    {data["resultb"]}
                    {data["resultc"]}
                    {data["resultd"]}
                    {data["resulte"]}
                    {data["resultf"]}
                    {data["resultg"]}
                    {data["resulth"]}
                    {data["resulti"]}
                </td>

            </tr>
        )
    }
    )


  return(
      <div>
          <table className="table table-striped border-2">
          <thead>
              <tr>
                  <th>Mata Pelajaran</th>
              </tr>
              <tr></tr>
              </thead>    
        <tbody>
            {DisplayMapel}
        </tbody>
        </table>
      </div>
  )
}


export default DisplayData;

data-mapel.json

[
    {
        "mapela":"Bahasa Indonesia",
        "resulta":"0%"
    },
    {
        "mapelb":"Ilmu Pengetahuan Alam",
        "resultb":"0%"
    },
    {
        "mapelc":"Bahasa Arab",
        "resultc":"0%"
    },
    {
        "mapeld":"Ilmu Pengetahuan Sosial",
        "resultd":"0%"
    },
    {
        "mapele":"Bahasa Inggris",
        "resulte":"0%"
    },
    {
        "mapelf":"Kimia",
        "resultf":"0%"
    },
    {
        "mapelg":"Biologi",
        "resultg":"0%"
    },
    {
        "mapelh":"Seni Budaya",
        "resulth":"0%"
    },
    {
        "mapeli":"Prakarya",
        "resulti":"0%"
    }
]

sorry if this question very messy,this was my first question 🙂
thank you for your answer !

i’ve been trying to place the function result into json data . but that thing just puzzling me back 🙂