import React from 'react';
import Multiselect from 'react-bootstrap-multiselect';
class Test2 extends React.Component {
constructor(props){
super(props)
this.state = {
list: [{value:'One',selected:true},{value:'Two'},{value:'Three'},{value:'Four',label:'Four Label'}]
}
}
render(){
return (
<Multiselect data={this.state.list} multiple />
);
}
}
export default Test2;
Here i am using react-bootstrap-multiselect
The ui is not coming properly.
Am i missing something?
PLease have a look.
try removing label attribute,
import React from 'react';
import Multiselect from 'react-bootstrap-multiselect';
class Test2 extends React.Component {
constructor(props){
super(props)
this.state = {
list: [{value:'One',selected:true},{value:'Two'},{value:'Three'},{value:'Four'}]
}
}
render(){
return (
<Multiselect data={this.state.list} multiple />
);
}
}
export default Test2;
Related
below is my code and console shows that current is always null and I am not sure why.
private tree: any;
constructor(props) {
super(props);
this.tree = React.createRef()
this.state = {
//
}
componentDidMount() {
console.log(this.tree);
}
render(){
return(
<div id= "tree" className="ba-treeview" ref={this.tree}>
//
</div>
)}
I think there are Syntax issues in your code.
I had tried it on CodeSandbox and it is working fine, though I had made correction to syntax wherever needed. Below is the code for your reference:
Tree Component:
import React from "react";
class Tree extends React.Component {
constructor(props) {
super(props);
this.tree = React.createRef();
this.state = {
someState: "StateValue"
};
}
componentDidMount() {
console.log(this.tree);
}
render() {
return (
<div id="tree" className="ba-treeview" ref={this.tree}>
TREE COMPONENT
</div>
);
}
}
export default Tree;
Usage (App.js):
import React from "react";
import "./styles.css";
import Tree from "./Tree";
export default function App() {
return (
<div className="App">
<Tree />
</div>
);
}
Below is the screen capture of execution for your reference:
Hope this may help.
Thanks
I have three components.
export default class PermissionHandler extends React.Component {
constructor(props) {
super(props);
this.state = {
permission: true
}
}
}
export default class App extends React.Component {
render() {
return(
<PermissionHandler />
<Component1 />
)
}
}
export default class Component1 extends React.Component {
render() {
return(
<SomeComponent /* visible= true/false depends on permission */ />
)
}
}
I want PermissionHandler state to be used by any other components directly without using events or local state. Is it possible?
Can I use refs to achieve this goal?
export default class App extends React.Component {
constructor(props) {
super(props);
this.permissionHandler = React.createRef();
}
render() {
return(
<PermissionHandler ref={this.permissionHandler} />
<Component1 permissionHandler={this.permissionHandler}/>
<Component2 permissionHandler={this.permissionHandler} />
)
}
}
export default class Component1 extends React.Component {
render() {
return(
<SomeComponent visible={this.props.permissionHandler.currenct.state.permission} />
)
}
}
But Component1 doesnt rerender when the state of PermissionHandler updates
Simply move your state up the tree, to the App component
How to use initialFiles in material-ui-dropzone i dont know method to use initialFiles_____________________________________________________________________________________________________________________________________________________________________________________________________
import React, {Component} from 'react'
import {DropzoneArea} from 'material-ui-dropzone'
class DropzoneAreaExample extends Component{
constructor(props){
super(props);
this.state = {
files: []
};
}
handleChange(files){
this.setState({
files: files
});
}
render(){
return (
<DropzoneArea
onChange={this.handleChange.bind(this)}
initialFiles
/>
)
}
}
export default DropzoneAreaExample;
<DropzoneArea initialFiles={[url]} ... />
I'm trying to use React Context API to pass props, however I got "undefined" error. The version of react is 16.3.2, and react-dom version is 16.3.2. The following is my code:
Provider.jsx:
import React from 'react';
export const PathContext = React.createContext({
rootPath: "http://localhost/example"
});
App.jsx:
import React from 'react';
import {PathContext} from './Provider.jsx';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<PathContext.Provider>
<AppRootPath />
</PathContext.Provider>
</div>
)
}
}
class AppRootPath extends React.Component {
render() {
return(
<div>
<span>App Root Path</span><br />
<PathContext.Consumer>
{
({rootPath}) => <span>{rootPath}</span>
}
</PathContext.Consumer>
</div>
)
}
}
export default App;
I can't find any problems in here, but the console reports this error: TypeError: Cannot read property 'rootPath' of undefined, and the error happens in here: ({rootPath}) => <span>{rootPath}</span>
About using a default value:
If there is no Provider for this context above, the value argument
will be equal to the defaultValue that was passed to createContext().
But you are wrapping it with Provider. Try removing Provider:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div>
<AppRootPath />
</div>
)
}
}
class AppRootPath extends React.Component {
render() {
return(
<div>
<span>App Root Path</span><br />
<PathContext.Consumer>
{
({rootPath}) => <span>{rootPath}</span>
}
</PathContext.Consumer>
</div>
)
}
}
I want to change the state of the component A from an onClick handler of a button that is located in the component B, I currently have my code like this:
Component A:
import React, { Component } from 'react'
import ComponentB from './component_b'
class ComponentA extends Component{
constructor(props){
super(props);
this.state=({
allergies11:'',
allergies12:'',
allergies13:'',
allergies14:''
})
this.onCCDSubmit = this.onCCDSubmit.bind(this);
}
onCCDSubmit(e){
e.preventDefault()
this.setState({
allergies11:'Penicillin',
allergies12:'2/13/10',
allergies13:'Hives',
allergies14:'moderate'
})
this.on
}
render(){
return(
<div>{this.state.allergies11} {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
<ComponentB />
<div>
)
}
}
export default ComponentA;
Component B:
import React, { Component } from 'react';
class ComponentB extends Component{
render(){
return(
<button type="button" onClick={this.onCCDSubmit}>Import</button>
)
}
}
export default ComponentB;
how can i achieved this, any help is welcome!
You can pass a callback to your Component B, which would trigger the callback upon click...
Component B:
import React, { Component } from 'react';
class ComponentB extends Component{
render(){
return(
<button type="button" onClick={this.props.clickHandler}>Import</button>
)
}
}
export default ComponentB;
Component A:
import React, { Component } from 'react'
import ComponentB from './component_b'
class ComponentA extends Component{
constructor() {
super();
this.handleClickB = this.handleClickB.bind(this);
}
handleClickB(e) {
e.stopPropagation();
this.setState({
// new state you want to set...
});
}
render(){
return(
<div>{this.state.allergies11} {this.state.allergies12} {this.state.allergies13} {this.state.allergies14}
<ComponentB clickHandler={this.handleClickB} />
<div>
)
}
}
export default ComponentA;