Background –
I am trying to use react inside Spring MVC application and for that I have installed react libs using
<code>npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server babel-loader
npm intall react-bootstap bootstrap
</code>
<code>npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server babel-loader
npm intall react-bootstap bootstrap
</code>
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server babel-loader
npm intall react-bootstap bootstrap
Getting Below error in dev tools console when I am trying to add React Boootstrap elements in my Component.jsx
jQuery.Deferred exception: Cannot read properties of undefined (reading ‘Button’) TypeError
<code>import {Button} from "react-bootstrap";
function Component() {
const [count,setCount] = React.useState(0)
const [inputs, setInputs] = React.useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
function incrementCount(){
setCount((prevoiuseCount) => prevoiuseCount+1)
}
return(
<div><h1>You clicked me {count} times </h1>
<button onClick={incrementCount}> Click me</button>
<div style={{marginLeft: "-1301px"}}>
<Button></Button>
</div>
<div style={{marginTop: "-16px"}}>
<hr style={{borderTop: "2px solid"}}></hr>
</div>
<form>
<table>
<tbody><tr>
<td><label>Account Number :</label></td>
<td><input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/></td>
</tr></tbody>
</table>
<br/>
<input type="button" value="Submit" className="btn btn-primary"/>
</form>
</div>);
}
export default Component`
</code>
<code>import {Button} from "react-bootstrap";
function Component() {
const [count,setCount] = React.useState(0)
const [inputs, setInputs] = React.useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
function incrementCount(){
setCount((prevoiuseCount) => prevoiuseCount+1)
}
return(
<div><h1>You clicked me {count} times </h1>
<button onClick={incrementCount}> Click me</button>
<div style={{marginLeft: "-1301px"}}>
<Button></Button>
</div>
<div style={{marginTop: "-16px"}}>
<hr style={{borderTop: "2px solid"}}></hr>
</div>
<form>
<table>
<tbody><tr>
<td><label>Account Number :</label></td>
<td><input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/></td>
</tr></tbody>
</table>
<br/>
<input type="button" value="Submit" className="btn btn-primary"/>
</form>
</div>);
}
export default Component`
</code>
import {Button} from "react-bootstrap";
function Component() {
const [count,setCount] = React.useState(0)
const [inputs, setInputs] = React.useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
function incrementCount(){
setCount((prevoiuseCount) => prevoiuseCount+1)
}
return(
<div><h1>You clicked me {count} times </h1>
<button onClick={incrementCount}> Click me</button>
<div style={{marginLeft: "-1301px"}}>
<Button></Button>
</div>
<div style={{marginTop: "-16px"}}>
<hr style={{borderTop: "2px solid"}}></hr>
</div>
<form>
<table>
<tbody><tr>
<td><label>Account Number :</label></td>
<td><input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/></td>
</tr></tbody>
</table>
<br/>
<input type="button" value="Submit" className="btn btn-primary"/>
</form>
</div>);
}
export default Component`
I am expecting to use react bootstrap component in jsx files. Please assist on this.