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} />
<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 🙂