We Keep Coding

Create a CommentList component from a json file submissions reactjs

I am trying to implement my own commenting system.
I already set up the comment form and I receive data in my netlify form submissions.
Then, I use the plugin netlify-plugin-form-submissions, which transforms your netlify form submissions into a json file (in my case in Form submissions data saved: static/comments/approved-comments_submissions.json)
So I am trying to retrieve the submissions data and make them appear as a comment list below my form.
Here is my CommentList Component:
import React, { useReducer } from 'react';
import "./styles.module.css";
class CommentsList extends React.Component {
constructor(props) {
super(props);
this.state = {
commentList: "../../static/comments/approved-comments_submissions.json"
}
}
renderComments() {
return this.state.commentList.map((item, index) => (
<ul>
<li>
<p>{item.data.name} a commenté le {item.created_on}</p>
<p>{item.data.commentaire}</p>
</li>
</ul>
));
}
render() {
return (
<div className="CommentsList">
{this.renderComments()}
</div>
);
}
}
export default CommentsList;
however it does not work, I can't retrieve the data from approved-comments_submissions. I have the following error:
TypeError: this.state.commentList.map is not a function
Besides, how can I render the comments only in the right urlpage? Because comments need to appear only in the right page
Here is an exemple of the data submission json file
[{"number":19,"title":null,"email":"email#email","name":"firstname", "summary":"testing","body":"testing","data":{"urlpage":"https://blabla.com/the/right/page/","name":"firstname","email":"email#email","commentaire":"testing"},"ip":"1.1.1.1","created_at":"2022-03-21T14:55:57.736Z","id":"aaaaaaaaa","form_id":"bbbbbbbb","site_url":"https://blabla.com","form_name":"approved-comments"}]
Here is my CommentForm code.
import React, { useReducer } from 'react';
import { makeStyles } from '#material-ui/core/styles';
import TextField from '#material-ui/core/TextField';
import { NetlifyForm, Honeypot } from 'react-netlify-forms'
import { useState } from "react"
import { useNetlifyForm, NetlifyFormProvider, NetlifyFormComponent} from "react-netlify-forms"
import { useFormik } from 'formik'
import { useLocation } from 'react-router-dom'
import "./styles.module.css";
const useStyles = makeStyles(theme => ({
input: {
minHeight: 100,
},
}));
const Commentbox = () => {
const classes = useStyles();
const netlify = useNetlifyForm({
name: 'approved-comments',
action: '/',
honeypotName: 'bot-field',
onSuccess: (response, context) => {
console.log('Successfully sent form data to Netlify Server')
}
})
const [touched, setTouched] = useState(false);
const location = useLocation();
const handleTouch = () => {
setTouched(true);
};
const {
handleSubmit,
handleChange,
handleBlur,
errors,
values
} = useFormik({
initialValues: { name: '', email: '', commentaire: '', urlpage: '' },
onSubmit: (values, {setStatus, resetForm}) => {
values.urlpage = "https://blabla.com" + location.pathname
netlify.handleSubmit(null, values);
resetForm();
setStatus({success: true});
},
validate: (values) => {
const errors = {}
if (
!/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
) {
errors.email = 'Adresse email invalide'
}
return errors
}
})
return (
<NetlifyFormProvider {...netlify}>
<input type="hidden" name="form-name" value="approved-comments" />
<h3>Leave a comment 😃</h3>
<NetlifyFormComponent onSubmit={handleSubmit}>
<Honeypot />
{netlify.success && (
<p sx={{ variant: 'alerts.success', p: 3 }}>
Thx for your comment 😃
</p>
)}
{netlify.error && (
<p sx={{ variant: 'alerts.muted', p: 3 }}>
Sorry 😢.
</p>
)}
<input
type="hidden"
name="urlpage"
id="urlpage"
/>
<TextField
required
id="name"
name='name'
label="Nom"
variant="outlined"
fullWidth
margin="normal"
onChange={handleChange}
onBlur={handleBlur}
error={errors.name}
value={values.name}
style = {{width: "70%"}}
/>
<TextField
required
id="email"
name='email'
label="Email"
variant="outlined"
fullWidth
margin="normal"
onChange={handleChange}
onBlur={handleBlur}
onFocus={handleTouch}
error={errors.email}
helperText={touched && !/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email) ? 'Adresse email non valide' : ' '}
value={values.email}
style = {{width: "70%"}}
/>
<TextField
id="commentaire"
name='commentaire'
label="Commentaire"
variant="outlined"
fullWidth
margin="normal"
multiline
onChange={handleChange}
onBlur={handleBlur}
error={errors.commentaire}
value={values.commentaire}
inputProps={{
className: classes.input
}}
style = {{width: "70%"}}
/>
{/* <input type='hidden' name='name' value='values.name' />
<input type='hidden' name='email' value='values.email' />
<input type='hidden' name='commentaire' value='values.commentaire' /> */}
<button class="button button--lg button--primary" type="submit">
Publiez votre commentaire
</button>
</NetlifyFormComponent>
</NetlifyFormProvider>
)
}
export default Commentbox;
EDIT
So now my code compiles
import React, { useReducer } from 'react';
import "./styles.module.css";
import commentList from '../../../static/comments/approved-comments_submissions.json'
const Comments = commentList.map((item) => {
<ul>
<li>
<p>{item.data.name} a commenté le {item.created_on}</p>
<p>{item.data.commentaire}</p>
</li>
</ul>
} )
class CommentsList extends React.Component {
render() {
return (
<div>
{Comments}
</div>
);
}
}
export default CommentsList;
however comments are still not rendering below my comment form :/

How to change Antd form initialValues depends at url or id?

I got same component with Antd form for add/edit article. With pathes in router
<Route path="/add" component={ !currentUser ? Login : ArticleEditor } />
<Route path="/article/:id/edit" component={ !currentUser ? Login : ArticleEditor } />
When I click "edit" button I add initialValues to form, than if I click "Create new article" url changes to "/add", but form didn't update values. Values remains from edited article. How to update form values? Tried to set initialValues depends at path, or "id" but its not worked. How to update antd form values in that case?
const initialValues = this.props.location.pathname === '/add' ? {} : {
title: this.props?.title,
body: this.props?.body,
description: this.props?.description
};
Here you can see the component code - codesandbox link

The main issue with the code is form fields are not reset when url is changed, you can detect path change in shouldComponentUpdate and set isLoading to true and rest should work.
Updating initialValues will not work because, antd does shallow compare and once initialValues are set, you will not be able to change them.
There was an issue in the logic of componentDidUpdate which I corrected as well.
import React from "react";
import ErrorsList from "../ErrorsList/ErrorsList";
import userService from "../../services/userService";
import { connect } from "react-redux";
import { push } from "react-router-redux";
import { Form, Input, Button } from "antd";
import { store } from "../../store";
import actionCreators from "../../actionCreators";
const formItemLayout = {
labelCol: { span: 24 },
wrapperCol: { span: 24 }
};
const formSingleItemLayout = {
wrapperCol: { span: 24, offset: 0 }
};
const mapStateToProps = (state) => ({
...state.editor
});
const mapDispatchToProps = (dispatch) => ({
onLoad: (payload) => dispatch(actionCreators.doEditorLoaded(payload)),
onUnload: () => dispatch(actionCreators.doEditorUnloaded()),
onUpdateField: (key, value) =>
dispatch(actionCreators.doUpdateFieldEditor(key, value)),
onSubmit: (payload, slug) => {
dispatch(actionCreators.doArticleSubmitted(payload));
store.dispatch(push(`/`)); //article/${slug}
},
onRedirect: () => dispatch(actionCreators.doRedirect())
});
class ArticleEditor extends React.Component {
constructor(props) {
super(props);
this.id = this.props.match.params.id;
const updateFieldEvent = (key) => (e) =>
this.props.onUpdateField(key, e.target.value);
this.changeTitle = updateFieldEvent("title");
this.changeDescription = updateFieldEvent("description");
this.changeBody = updateFieldEvent("body");
this.changeTagInput = updateFieldEvent("tagInput");
this.isLoading = true;
this.submitForm = () => {
const article = {
title: this.props.title,
description: this.props.description,
body: this.props.body,
tagList: this.props.tagInput.split(",")
};
const slug = { slug: this.props.articleSlug };
const promise = this.props.articleSlug
? userService.articles.update(Object.assign(article, slug))
: userService.articles.create(article);
this.props.onSubmit(promise, this.props.articleSlug);
};
}
componentDidUpdate(prevProps, prevState) {
if (this.props.match.params.id !== prevProps.match.params.id) {
if (prevProps.match.params.id) {
this.props.onUnload();
}
this.id = this.props.match.params.id;
if (this.id) {
return this.props.onLoad(userService.articles.get(this.id));
}
this.props.onLoad(null);
}
this.isLoading = false;
}
componentDidMount() {
if (this.id) {
this.isLoading = true;
return this.props.onLoad(userService.articles.get(this.id));
}
this.isLoading = false;
this.props.onLoad(null);
}
componentWillUnmount() {
this.props.onUnload();
}
shouldComponentUpdate(newProps, newState) {
if (this.props.match.params.id !== newProps.match.params.id) {
this.isLoading = true;
}
return true;
}
render() {
const { errors } = this.props;
const initialValues = {
title: this.props?.title,
body: this.props?.body,
description: this.props?.description,
tags: this.props?.tagList
};
return this.isLoading ? (
"loading..."
) : (
<div className="editor-page">
<div className="container page">
<div className="">
<div className="">
<ErrorsList errors={errors}></ErrorsList>
<Form
{...formItemLayout}
initialValues={initialValues}
onFinish={this.submitForm}
>
<Form.Item
label="Title"
name="title"
placeholder="Article Title"
rules={[
{
required: true,
message: "Please input article title"
}
]}
>
<Input onChange={this.changeTitle} />
</Form.Item>
<Form.Item
label="Description"
name="description"
placeholder="Short description"
rules={[
{
required: true,
message: "Please input article description"
}
]}
>
<Input onChange={this.changeDescription} />
</Form.Item>
<Form.Item
name="body"
label="Article Text"
placeholder="article text"
>
<Input.TextArea onChange={this.changeBody} />
</Form.Item>
<Form.Item name="tags" label="Tags" placeholder="Enter tags">
<Input onChange={this.changeTagInput} />
</Form.Item>
<Form.Item {...formSingleItemLayout}>
<Button
className="editor-form__btn"
type="primary"
htmlType="submit"
disabled={this.props.inProgress}
>
Submit Article
</Button>
</Form.Item>
</Form>
</div>
</div>
</div>
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ArticleEditor);
take a look at this forked codesandbox.

You have to clean the fields before you re-use the 'ArticleEditor' component. Here you are using the same component for two different route, hence it's not changing.
You have to check if you are editing or adding a new entry to the Editor. Your editor component may look like this then,
const ArticleEditor = props => {
const [form] = Form.useForm();
useEffect(() => {
if (props.match.params.id) form.setFieldsValue({value : 'Some values'})
else form.resetFields()
}, [props?.match?.params]);
return (
<Form form={form} onFinish={yourFinishMethod}>
//...your form fields
</Form>
)
}

Value on Object is null when sending from axios to API Controller.How to solve it?

I am making React Crud Application and when try to send data from axios to API Controller I am not able to send those data, while checking in API I found that all the the values are null. But with the same API and values i tried from POSTMAN it worked perfectly. How Can i solve this?
import React, { FormEvent, useState } from 'react'
import { Segment, Grid, GridColumn, Button, Form, Container } from 'semantic-ui-react'
import { IEmployee } from '../Model/activity'
import { RouteComponentProps } from 'react-router-dom'
import axios from 'axios';
import {v4 as uuid} from 'uuid';
interface DetailParams {
id: string;
}
const EmployeeForm : React.FC<RouteComponentProps<DetailParams>> = ({ match, history }) => {
const [employee, setEmployee] = useState<IEmployee>({
id: '',
firstName: '',
lastName: '',
address: '',
organization: ''
})
const handleInputChange = (event: FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const { name, value } = event.currentTarget;
setEmployee({ ...employee, [name]: value })
}
const handleSubmit = () => {
console.log(employee);
if (employee.id.length === 0) {
let newActivity = {
...employee,
id: uuid(),
}
console.log(employee);
axios.post('https://localhost:44353/Employee/CreateEmployee',{data : employee})
.then((response) => {
history.push(`/manage/${newActivity.id}`)
})
} else {
axios.post('https://localhost:44353/Employee/EditEmployee',{data : employee})
.then((response) => {
history.push(`/manage/${employee.id}`)
})
}
}
return (
<Container style={{ marginTop: '7em' }}>
<Grid>
<GridColumn width={10}>
<Segment clearing>
<Form onSubmit={handleSubmit}>
<Form.Input name='firstName' onChange={handleInputChange} placeholder='First Name' value={employee.firstName} />
<Form.TextArea name='lastName' onChange={handleInputChange} placeholder='Last Name' value={employee.lastName} />
<Form.Input name='address' onChange={handleInputChange} placeholder='Address' value={employee.address} />
<Form.Input name='organization' onChange={handleInputChange} placeholder='Organization' value={employee.organization} />
<Button floated='right' positive type='submit' content='Submit' />
<Button onClick={() => history.push('/employeeList')} floated='right' type='button' content='Cancel' />
</Form>
</Segment>
</GridColumn>
</Grid>
</Container>
)
}
export default EmployeeForm
The above is my form class from where the data is to be send from axios.
While Console.log in handle submit button the values are displayed perfectly.
My NET.Core API is :-
[HttpPost]
public async Task<ActionResult> CreateEmployee([FromBody] Employee Employee)
{
var result = await _employeeService.CreateEmployee(Employee);
return Ok(Employee.FirstName);
}

It was wrong with syntax. when chane changed axios.post('https://localhost:44353/Employee/CreateEmployee',{data : employee}) to axios.post('https://localhost:44353/Employee/CreateEmployee',employee) it worked fine

Uncontrolled input React

I have the following code:
import React, { Component } from 'react'
import axios from 'axios'
import Navbar from '../Navbar'
import { Avatar, TextField, Button, Container, CircularProgress } from '#material-ui/core'
import Alert from '#material-ui/lab/Alert'
class PrivateProfile extends Component {
constructor(props) {
super(props);
this.state = {
user: null,
id: null,
image: null,
pp: null,
username: 'AnonymousUser',
showSuccess: false
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
this.handleFileChange = this.handleFileChange.bind(this)
}
componentDidMount() {
axios.get('http://127.0.0.1:8000/users/profile')
.then(res => {
this.setState({
user: res.data,
id: res.data.id,
username: res.data.username,
pp: res.data.pp
})
})
.catch(err => console.log(err))
}
handleSubmit(e) {
e.preventDefault()
const fd = new FormData()
fd.append('pp', this.state.image)
fd.append('username', this.state.user.username)
fd.append('email', this.state.user.email)
fd.append('bio', this.state.user.bio)
const d = {
pp : this.state.image,
username : this.state.user.username,
email : this.state.user.email,
bio : this.state.user.bio
}
console.log('d', d)
console.log('fd', fd)
axios.put(`http://127.0.0.1:8000/users/profile/update/${this.state.id}/`, fd, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(res => {
this.setState({
user: res.data,
id: res.data.id,
pp: res.data.pp,
image: null,
username: res.data.username,
showSuccess: true
})
})
.catch(err => console.log(err))
}
handleChange(e) {
this.setState({
user: {
[e.target.name]: e.target.value
}
})
}
handleFileChange(e) {
this.setState({image: e.target.files[0]})
}
render() {
let message
let alert
if (this.state.user !== null) {
if (!this.state.user.bio) {
message = <h4>Please update your profile below.</h4>
}
if (this.state.showSuccess) {
alert = <Alert action={<Button onClick={() => this.setState({showSuccess: false})}>Close</Button>} severity='success'>Profile Successfully Updated</Alert>
}
return (
<div>
<Navbar />
<Container style={{background: '#f7f4e9'}}>
<div style={{height: '60px'}}></div>
<h2>Your Profile</h2>
<Avatar src={this.state.user.pp} alt={this.state.user.username} />
{message}
{alert}
<h4>Your data:</h4>
<form onSubmit={this.handleSubmit}>
<p>Profile Pic</p>
<input type="file" onChange={this.handleFileChange}/>
<br></br>
<br></br>
<TextField label='Username' name="username" onChange={this.handleChange} type="text" value={this.state.user.username} />
<br></br>
<br></br>
<TextField label='Email' name="email" onChange={this.handleChange} type="email" value={this.state.user.email} />
<br></br>
<br></br>
<TextField label='Bio' name="bio" onChange={this.handleChange} type="text" value={this.state.user.bio} />
<br></br>
<br></br>
<br></br>
<Button type="submit" value="submit">Update</Button>
</form>
</Container>
</div>
)
} else {
return <CircularProgress />
}
}
}
export default PrivateProfile
I get the error saying: Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Can someone help me fix it.

Since you're initializing state values with null and using it like value={this.state.user.username}, and update the state, you'll get such error:
Warning: A component is changing a controlled input of type text to be uncontrolled.
To control it's state, use it like:
value={this.state.user.username || ''}
As per my comment, you have issue here:
handleChange(e) {
this.setState({
user: {
[e.target.name]: e.target.value
}
})
}
The user state will always change on your any input changes, you will need like:
handleChange(e) {
this.setState({
user: {
...this.state.user,
[e.target.name]: e.target.value
}
})
}

How to render method from handle submit of a stateful component

I am trying to redirect a page on datepicker submit, the problem is I get Unexpected token expected ";"
I have tried suggestions from users and React Docs as well as Datepicker Docs This is where I am now coming from In JSX How to redirect on Handlesubmit from DataPicker? But when applied to my code I get the error
./src/components/Toolbar/SearchCard/Datepicker/Datepicker.jsx
Line 42: Parsing error: Unexpected token, expected ";"
40 | }
41 | state = {};
> 42 | render() {
| ^
43 | return (
44 | <>
45 | <FormGroup>
Here is the whole file
import React from "react";
import "./Datepicker.css";
import "./Btnsearch/Btnsearch";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";
// reactstrap components
import {
FormGroup,
InputGroupAddon,
InputGroupText,
InputGroup,
Col,
Row
} from "reactstrap";
import Btnsearch from "./Btnsearch/Btnsearch";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = event => {
event.preventDefault();
this.setState({wasSubmitted: true});
}
render() {
const { value, wasSubmitted } = this.state;
if (wasSubmitted) {
return <Redirect to='/Bookingpage' />
} else {
return //... your normal component
}
}
}
state = {};
render() {
return (
<>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText
>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
value={this.state.value}
onChange={this.handleChange}
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
</InputGroup>
</FormGroup>
<form onSubmit={this.handleSubmit}>
<Btnsearch type="submit" value={this.state.value}/>
</form>
</>
);
}
}
export default Datepicker;
I expect the app to render the hanndleSubmit and redirect to a new page

Your exception is because your parser / bundler cannot handle inline properties on the class.
You could try and set that up, however because you are defining state in the constructor, line 41 (state = {};) is not needed.
aka state is assigned to the class instance here
constructor(props) {
super(props);
this.state = {
value: ""
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
In addition to that, this looks like an issue with copy pasting code
You have two render methods in this class with unmatching curly brackets. as you can see here
render() {
const { value, wasSubmitted } = this.state;
if (wasSubmitted) {
return <Redirect to='/Bookingpage' />
} else {
return //... your normal component
}
}
}
state = {};
render() {
return (
This should work
import React from "react";
import { Redirect } from 'react-router-dom';
import "./Datepicker.css";
import "./Btnsearch/Btnsearch";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";
// reactstrap components
import {
FormGroup,
InputGroupAddon,
InputGroupText,
InputGroup,
Col,
Row
} from "reactstrap";
import Btnsearch from "./Btnsearch/Btnsearch";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
// this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = event => {
event.preventDefault();
this.setState({wasSubmitted: true});
}
render() {
const { value, wasSubmitted } = this.state;
if (wasSubmitted) {
return <Redirect to='/Bookingpage' />
} else {
return (
<>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText
>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
value={this.state.value}
onChange={this.handleChange}
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
</InputGroup>
</FormGroup>
<form onSubmit={this.handleSubmit}>
<Btnsearch type="submit" value={this.state.value}/>
</form>
</>
);
}
}
}
export default Datepicker;