Here is the code of my create category javascript . i was trying to edit the onsubmtit function. I am trying to make database take the data from the user which is in the firebase javascript file below.
import React, { Component } from 'react';
import Dropzone from 'react-dropzone';
export default class CreateCategory extends Component {
constructor(props) {
super(props);
}
state = {
category: '',
image: null,
imagePath: null,
};
onChange = (e) => this.setState({[e.target.name]: e.target.value});
onSubmit = (e) => {
e.preventDefault();
const { category, image } = this.state;
if(category && image) {
this.props.firebase.category(`${Math.floor(Date.now() / 1000) + image.name}`).put(image).then(snapshot => {
let self = this;
snapshot.ref.getDownloadURL().then(function(downloadURL) {
//console.log("File available at", downloadURL);
return this.props.firebase.categories().push(
{
name: category,
image: downloadURL
})
.then(data => {
console.log(data);
self.props.history.push.categories();
})
});
});
}else {
alert('Field can not empty!');
}
}
onDrop = (files, rejectedFiles) => {
//console.log(files);
this.setState({image: files[0]});
const reader = new FileReader();
reader.addEventListener("load", () => {
this.setState({imagePath: reader.result});
}, false);
reader.readAsDataURL(files[0]);
}
render() {
return (
<div>
<div className="row">
<div className="col-lg-12">
<h1 className="page-header">
Create Category
</h1>
<ol className="breadcrumb">
<li className="active">
<i className="fa fa-dashboard"></i> Dashboard
</li>
</ol>
</div>
</div>
<div className="row">
<div className="col-md-8">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Category Name</label>
<input className="form-control" onChange={this.onChange} name="category" />
</div>
<div className="form-group">
<label htmlFor="image">Category Image:</label>
<div className="row">
<div className="col-md-6">
<Dropzone onDrop={this.onDrop} accept='image/*' multiple={false}>Drop image here</Dropzone>
</div>
<div className="col-md-6">
{
this.state.image &&
<img src={this.state.imagePath} width="320" height="240"/>
}
</div>
</div>
</div>
<div className="form-group">
<input type="submit" className="btn btn-default" value="Create"/>
</div>
</form>
</div>
</div>
</div>
)
}
}
and here is the code of my firbase javascript
import app from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/storage"
var config = {
// ...
};
class Firebase {
constructor() {
app.initializeApp(config);
this.auth = app.auth();
this.db = app.database();
this.storage = app.storage();
}
//authentication API (contextAPI)
doCreateUserWithEmailAndPassword = (email, password) =>
this.auth.createUserWithEmailAndPassword(email, password);
doSignInWithEmailAndPassword = (email, password) =>
this.auth.signInWithEmailAndPassword(email, password);
doSignOut = () => this.auth.signOut();
doPasswordReset = (email) => this.auth.sendPasswordResetEmail(email);
doPasswordUpdate = (password) =>
this.auth.currentUser.updatePassword(password);
//user API
user = (uid) => this.db.ref(`users/${uid}`);
users = () => this.db.ref("users");
//Categories API
category =() => this.storage.ref("categories/");
categories = (cid) => this.db.ref(`categories/${cid}`);
//Recipe API
recipe = (rid) => this.db.ref(`categories/recipes/${rid}`);
recipes = () => this.storage.ref("recipes/");
//chat API
chatRef = () => this.db.ref("general");
}
export default Firebase;
I am getting an error which says Children is not a function
Here is the code of my create category javascript . i was trying to edit the onsubmtit function. I am trying to make database take the data from the user which is in the firebase javascript file below.
import React, { Component } from 'react';
import Dropzone from 'react-dropzone';
export default class CreateCategory extends Component {
constructor(props) {
super(props);
}
state = {
category: '',
image: null,
imagePath: null,
};
onChange = (e) => this.setState({[e.target.name]: e.target.value});
onSubmit = (e) => {
e.preventDefault();
const { category, image } = this.state;
if(category && image) {
this.props.firebase.category(`${Math.floor(Date.now() / 1000) + image.name}`).put(image).then(snapshot => {
let self = this;
snapshot.ref.getDownloadURL().then(function(downloadURL) {
//console.log("File available at", downloadURL);
return this.props.firebase.categories().push(
{
name: category,
image: downloadURL
})
.then(data => {
console.log(data);
self.props.history.push.categories();
})
});
});
}else {
alert('Field can not empty!');
}
}
onDrop = (files, rejectedFiles) => {
//console.log(files);
this.setState({image: files[0]});
const reader = new FileReader();
reader.addEventListener("load", () => {
this.setState({imagePath: reader.result});
}, false);
reader.readAsDataURL(files[0]);
}
render() {
return (
<div>
<div className="row">
<div className="col-lg-12">
<h1 className="page-header">
Create Category
</h1>
<ol className="breadcrumb">
<li className="active">
<i className="fa fa-dashboard"></i> Dashboard
</li>
</ol>
</div>
</div>
<div className="row">
<div className="col-md-8">
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label>Category Name</label>
<input className="form-control" onChange={this.onChange} name="category" />
</div>
<div className="form-group">
<label htmlFor="image">Category Image:</label>
<div className="row">
<div className="col-md-6">
<Dropzone onDrop={this.onDrop} accept='image/*' multiple={false}>Drop image here</Dropzone>
</div>
<div className="col-md-6">
{
this.state.image &&
<img src={this.state.imagePath} width="320" height="240"/>
}
</div>
</div>
</div>
<div className="form-group">
<input type="submit" className="btn btn-default" value="Create"/>
</div>
</form>
</div>
</div>
</div>
)
}
}
and here is the code of my firbase javascript
import app from "firebase/app";
import "firebase/auth";
import "firebase/database";
import "firebase/storage"
var config = {
// ...
};
class Firebase {
constructor() {
app.initializeApp(config);
this.auth = app.auth();
this.db = app.database();
this.storage = app.storage();
}
//authentication API (contextAPI)
doCreateUserWithEmailAndPassword = (email, password) =>
this.auth.createUserWithEmailAndPassword(email, password);
doSignInWithEmailAndPassword = (email, password) =>
this.auth.signInWithEmailAndPassword(email, password);
doSignOut = () => this.auth.signOut();
doPasswordReset = (email) => this.auth.sendPasswordResetEmail(email);
doPasswordUpdate = (password) =>
this.auth.currentUser.updatePassword(password);
//user API
user = (uid) => this.db.ref(`users/${uid}`);
users = () => this.db.ref("users");
//Categories API
category =() => this.storage.ref("categories/");
categories = (cid) => this.db.ref(`categories/${cid}`);
//Recipe API
recipe = (rid) => this.db.ref(`categories/recipes/${rid}`);
recipes = () => this.storage.ref("recipes/");
//chat API
chatRef = () => this.db.ref("general");
}
export default Firebase;
I am getting an error which says Children is not a function
Share Improve this question edited Jun 8, 2020 at 8:33 Ramesh Reddy 10.7k3 gold badges21 silver badges38 bronze badges asked Jun 8, 2020 at 8:30 devilsubarnadevilsubarna 512 silver badges5 bronze badges 3- 1 remove your private key fastly – AlainIb Commented Jun 8, 2020 at 8:31
-
1
Your code does not contain the token
childrenanywhere. – Niet the Dark Absol Commented Jun 8, 2020 at 8:35 - It appears that you have posted sensitive/private information. Please reset your passwords and/or revoke API keys and tokens, as they are considered promised when posted on the internet. – Samuel Liew Commented Jun 21, 2020 at 9:22
2 Answers
Reset to default 3You use Dropzone ponent without inner children. Please read documentation github./react-dropzone
import React from 'react'
import Dropzone from 'react-dropzone'
<Dropzone onDrop={acceptedFiles => console.log(acceptedFiles)}>
{({getRootProps, getInputProps}) => (
<section>
<div {...getRootProps()}>
<input {...getInputProps()} />
<p>Drag 'n' drop some files here, or click to select files</p>
</div>
</section>
)}
</Dropzone>
In my case I used
import $ from 'jquery';
import 'jquery-ui-dist/jquery-ui.min.js'; // I forgot to add this
the missing line in my js file cause the error