If I embed Json Data inside reactjs code. everything works fine.
But am having an issue calling json files externally into reactjs. Some Stackoverflow scholars suggest calling external library using the method below install json-loader: npm i json-loader --save
here is the source link of some scholars suggested solutions on that loading json data from local file into React JS
my problem is that I cannot get it to work as it displays error "require is not defined". below is the code.
<!DOCTYPE html>
<html>
<head>
<title>Hello ReactJS!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/jsx" src="qaapp.js"></script>
</head>
<body>
<div id="content" class="container"></div>
<script type="text/jsx">
var test = require('json!./data.json');
alert(test);
React.render( <Test details={test}/>, document.getElementById( "content" ) );
</script>
</body>
</html>
**data.json**
{
name: "Sample Test",
description: "This is a sample test paper to demonstrate the ReactJS UI design by components.",
passCutoff: 0.33,
applyNegativeMarking: false,
time: 1,
questions: [
{
no: "1",
qtext:"California is in which part of USA?",
options:[
{text:"East"},
{text:"Mid"},
{text:"West"},
{text:"South"}
],
ans:"West",
marks: 3
},
{
no: "2",
qtext:"Who is Prime Minister of India?",
options:[
{text:"Sonia Gandhi"},
{text:"Narendra Modi"},
{text:"Manmohan Singh"},
{text:"Rahul Gandhi"}
],
ans:"Narendra Modi",
marks: 2
},
{
no: "3",
qtext:"Which of the following is most popular Search Engine Company?",
options:[
{text:"Microsoft"},
{text:"Facebook"},
{text:"Google"},
{text:"Yahoo"}
],
ans:"Google",
marks: 1
},
]
}