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]} ... />
Related
I am new in React Js and want to call the parent method from the child method.
There is a class login.jsx when someone clicks on submits button then a method changeUser in FirstPage.jsx should be invoked but when I try the online solution I am getting same error again and again that this.props.changeUser is not a function.
Login.jsx (child class)
import React, { Component } from 'react';
class Login extends Component {
constructor(props){
super(props);
this.state ={
user : null
}
this.onNameChange = this.onNameChange.bind(this);
this.onHandleClick = this.onHandleClick.bind(this);
}
onNameChange = (event)=>{
this.setState({
user:event.target.value
})
}
onHandleClick=(event)=>{
event.preventDefault();
this.props.changeUser("hello");
}
render() {
return (
<form>
<h3>Sign In</h3>
<div>
<label>User Name</label>
<input type="text" name="userId" placeholder="Enter User name" onChange ={this.onNameChange}/>
</div>
<button className="btn btn-primary btn-block" onClick={this.onHandleClick}>Submit</button>
</form>
);
}
}
export default Login;
FirstPage.jsx (parent class)
import React, { Component } from 'react';
import Login from './Login';
class Firstpage extends Component {
constructor(props){
super(props);
this.state=
{
user:null
}
this.changeUser = this.changeUser.bind(this)
}
changeUser =(x)=>{
console.log(x)
}
render() {
return (
<div>
<Login changeUser ={this.changeUser}/>
</div>
);
}
}
export default Firstpage;import React, { Component } from 'react';
import Login from './Login';
class Firstpage extends Component {
constructor(props){
super(props);
this.state=
{
user:null
}
this.changeUser = this.changeUser.bind(this)
}
changeUser =(x)=>{
console.log(x)
}
render() {
return (
<div>
<Login changeUser ={this.changeUser}/>
</div>
);
}
}
export default Firstpage;
I am getting an error that TypeError: this.props.changeUser is not a function
Please help me.
try to avoid using a lambda expression within you class component. Just create a simple member function:
import React, { Component } from 'react';
import Login from './Login';
class Firstpage extends Component {
constructor(props){
super(props);
this.state=
{
user:null
}
this.changeUser = this.changeUser.bind(this)
}
changeUser(x) // Try to declare this as member function
{
console.log(x)
}
render() {
return (
<div>
<Login changeUser ={this.changeUser}/>
</div>
);
}
}
export default Firstpage
You are making a mistake here while binding , inside constructor
//WRONG
this.onNameChange = this.onNameChange.bind(this);
this.onHandleClick = this.onHandleClick.bind(this);
//RIGHT
this.onNameChange = onNameChange.bind(this);
this.onHandleClick = onHandleClick.bind(this);
CODE:
constructor(props){
super(props);
this.state ={
user : null
}
this.onNameChange = onNameChange.bind(this);
this.onHandleClick = onHandleClick.bind(this);
}
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
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;
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;