We Keep Coding

handleRegister not returning value, undefined

I'm trying to return a value from my handleRegister function, but it gives me undefined, I checked before returning the value and it exists but as soon as I return, it's undefined. Can someone please help me? The object exists:
{
"signup": {
"name": "riced",
"id": 7135,
"email": "riced#gmail.com",
"password": "U24jg2xwSbF4R6k",
"error": null,
"__typename": "User"
}
}
The following part fails:
handleRegister(this.state).then(
(data) => {
console.log(data);
return;
});
import * as React from "react"
import { navigate } from "gatsby"
import {isLoggedIn } from "../services/auth"
import fetch from 'isomorphic-fetch';
import {ApolloClient, HttpLink, InMemoryCache, gql} from '#apollo/client';
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: 'http://10.0.0.212:9000/',
fetch
})
});
export const REGISTER_USER = gql
mutation Mutation($signupInput: SignUpInput) {
signup(signupInput: $signupInput) {
name
id
email
password
error
}
}
;
export async function handleRegister ({ username, email, password }) {
/*
if (username === `john` && password === `pass`) {
return setUser({
username: `john`,
name: `Johnny`,
email: `johnny#example.org`,
})
*/
/*
client.query({ query: ALL_USERS }).then(result => console.log(result));
*/
//let [errors, setErrors] = React.useState([]);
var gottenToken = "";
//let gottenName;
await client.mutate({ mutation: REGISTER_USER, variables: {
"signupInput": {
"name": username,
"password": password,
"email": email,
}
} }).then(result => {
console.log(result);
console.log(result.data!.signup);
//let signup = JSON.stringify(result.data!.signup);
return result.data!.signup
//Promise.resolve(result.data!.signup);
}).catch(err => {
console.log(err);
//setUser({})
//React.useEffect(() => {
//localStorage.setItem('signupError', JSON.stringify(err));
//}, [errors]);
//return haveErrorOccured("Signing up error"); // send error to browser
});
//return haveErrorOccured("Signing up error"); // send error to browser
}
class Register extends React.Component {
state = {
username: ``,
email: ``,
password: ``,
}
handleUpdate = async event => {
await this.setState({
[event.target.name]: event.target.value,
})
}
handleSubmit = async event => {
event.preventDefault()
//handleRegister(this.state)
/*
handleRegister(this.state).then(r => {
console.log(r);
}).catch(err => {
console.log(err);
});
*/
handleRegister(this.state).then(
(data) =>{
console.log(data);
return;
//return 43;
});
//console.log("signed up: " + signup);
//console.table(signup);
}
render() {
if (isLoggedIn()) {
navigate(`/app/profile`)
}
//let errorSignup;
//if(window.localStorage.getItem("signupError")){
// errorSignup = JSON.stringify(JSON.parse(window.localStorage.getItem("signupError")));
//}
//navigate("/app/register?registered", { state: { foo: "bar" }});
//<p>{errorSignup}</p>
return (
<>
<h1>Register</h1>
<form
method="post"
onSubmit={event => {
this.handleSubmit(event);
}}
>
<label>
Username
<input type="text" name="username" onChange={this.handleUpdate} />
</label>
<label>
Email
<input type="text" name="email" onChange={this.handleUpdate} />
</label>
<label>
Password
<input
type="password"
name="password"
onChange={this.handleUpdate}
/>
</label>
<input type="submit" value="Log In" />
</form>
</>
)
}
}
export default Register

React hooks form, setting default values from a reduced array doesn't populate, but manually enterring same object does

I am using react hooks forms, and I am trying to set the default values of a form that is outputted by mapping over an array and outputting the inputs in the form. I have reduced the array to an object like this {name0:"fijs",name1:"3838"...} and if I manually pass that in the default values it maps to my inputs and populates them. However if I enter them from the variable that is doing the reduce function it doesn't populate it. I think it is because on first render it is undefined. I have tried using a useEffect, but that didn't work so I am stuck.
This is the part of the code I am working on
const test = formState?.reduce((obj, item, idx) => {
return { ...obj, [`${item.name}${idx}`]: "fdsjfs" };
}, {});
const { register, handleSubmit, errors } = useForm({
defaultValues: test,
});
console.log(test);
and this is the whole thing
import { useQuery, gql, useMutation } from "#apollo/client";
import { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { useForm } from "react-hook-form";
const INPUT_VALUES = gql`
query GetInputValues {
allFormInputVals {
data {
name
_id
type
}
}
}
`;
const ADD_INPUT_VALUES = gql`
mutation AddInputValues(
$name: String!
$type: String!
$index: Int!
$ID: ID!
) {
createFormInputVal(
data: {
name: $name
type: $type
index: $index
formRoot: { connect: $ID }
}
) {
name
}
}
`;
const Home = () => {
const blankFormInput = {
__typename: "FormInputVal",
name: "test",
_id: uuidv4(),
type: "text",
};
const [formState, setFormState] = useState([blankFormInput]);
const [formStateVals, setFormStateVals] = useState(undefined);
const { loading, error, data } = useQuery(INPUT_VALUES);
const [createFormInputVal, { data: createInputData }] = useMutation(
ADD_INPUT_VALUES
);
useEffect(() => {
setFormState(data?.allFormInputVals?.data);
}, [data]);
const test = formState?.reduce((obj, item, idx) => {
return { ...obj, [`${item.name}${idx}`]: "fdsjfs" };
}, {});
const { register, handleSubmit, errors } = useForm({
defaultValues: test,
});
console.log(test);
const onSubmit = (data) => console.log(data);
console.log(errors);
const addInput = async () => {
const blanktext = {
__typename: "FormInputVal",
name: "Product Image",
_id: uuidv4(),
type: "text",
};
setFormState([...formState, { ...blanktext }]);
console.log(formState);
const res = await createFormInputVal({
variables: {
name: "test",
type: "text",
index: 0,
ID: "291541554941657608",
},
}).catch(console.error);
console.log(res);
};
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<>
<form onSubmit={handleSubmit(onSubmit)}>
<input type="button" value="Add Form Input" onClick={addInput} />
{formState?.map((val, idx) => {
const nameId = `name${idx}`;
const typeId = `type-${idx}`;
return (
<div key={val._id}>
{val.type === "text" && (
<>
<label htmlFor={nameId}>{`${val.name} #${idx + 1}`}</label>
<input
type="text"
name={nameId}
id={nameId}
className={val.type}
ref={register()}
/>
{/* <label htmlFor={typeId}>{`Type #${idx + 1}`}</label>
<select name={typeId} id={typeId} className={val.type}>
{data.allFormInputVals.data.map((item) => {
return (
<option key={item._id} value={item.type}>
{item.type}
</option>
);
})}
</select> */}
</>
)}
</div>
);
})}
<button type="submit">Save Form</button>
</form>
</>
);
};
export default Home;
UPDATE: I have tried useEffect with a reset from the api, I thought this was the solution, but still no dice.
const { register, handleSubmit, errors, reset } = useForm();
useEffect(() => {
const result = test; // result: { firstName: 'test', lastName: 'test2' }
reset(result); // asynchronously reset your form values
}, [reset]);
UPDATE: I abstracted the Form to it;s own component, but it still does not work.
Form.js
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useQuery, gql, useMutation } from "#apollo/client";
import { v4 as uuidv4 } from "uuid";
const ADD_INPUT_VALUES = gql`
mutation AddInputValues(
$name: String!
$type: String!
$index: Int!
$ID: ID!
) {
createFormInputVal(
data: {
name: $name
type: $type
index: $index
formRoot: { connect: $ID }
}
) {
name
}
}
`;
export default function Form({ formState, setFormState }) {
const test = formState?.reduce((obj, item, idx) => {
return { ...obj, [`${item.name}${idx}`]: "fdsjfs" };
}, {});
console.log(test);
const { register, handleSubmit, errors } = useForm({ defaultValues: test });
const [formStateVals, setFormStateVals] = useState(undefined);
// console.log(test);
const onSubmit = (data) => console.log(data);
console.log(errors);
const addInput = async () => {
const blanktext = {
__typename: "FormInputVal",
name: "Product Image",
_id: uuidv4(),
type: "text",
};
setFormState([...formState, { ...blanktext }]);
console.log(formState);
const res = await createFormInputVal({
variables: {
name: "test",
type: "text",
index: 0,
ID: "291541554941657608",
},
}).catch(console.error);
console.log(res);
};
const [createFormInputVal, { data: createInputData }] = useMutation(
ADD_INPUT_VALUES
);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input type="button" value="Add Form Input" onClick={addInput} />
{formState?.map((val, idx) => {
const nameId = `name${idx}`;
const typeId = `type-${idx}`;
return (
<div key={val._id}>
{val.type === "text" && (
<>
<label htmlFor={nameId}>{`${val.name} #${idx + 1}`}</label>
<input
type="text"
name={nameId}
id={nameId}
className={val.type}
ref={register()}
/>
{/* <label htmlFor={typeId}>{`Type #${idx + 1}`}</label>
<select name={typeId} id={typeId} className={val.type}>
{data.allFormInputVals.data.map((item) => {
return (
<option key={item._id} value={item.type}>
{item.type}
</option>
);
})}
</select> */}
</>
)}
</div>
);
})}
<button type="submit">Save Form</button>
</form>
);
}
index.js
import { useQuery, gql, useMutation } from "#apollo/client";
import { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import Form from "../components/Form";
const INPUT_VALUES = gql`
query GetInputValues {
allFormInputVals {
data {
name
_id
type
}
}
}
`;
const Home = () => {
const blankFormInput = {
__typename: "FormInputVal",
name: "test",
_id: uuidv4(),
type: "text",
};
const [formState, setFormState] = useState([blankFormInput]);
const { loading, error, data } = useQuery(INPUT_VALUES);
useEffect(() => {
const formData = data?.allFormInputVals?.data;
setFormState(formData);
}, [data]);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<>
<Form formState={formState} setFormState={setFormState} />
</>
);
};
export default Home;

You could extract the form to its own component and only render it when the data is fetched. This way, when you use useForm in the child component, the default values will be set properly.
const Home = () => {
const { loading, error, data } = useQuery(INPUT_VALUES)
const blankFormInput = {
__typename: "FormInputVal",
name: "test",
_id: uuidv4(),
type: "text",
}
const [formState, setFormState] = useState([blankFormInput])
// other code
if (loading) {
return <p>Loading...</p>
}
return <MyForm defaultValues={formState} />
}
If you don't want to change the structure, you could set the input values using setValue when the data is ready.
useEffect(() => {
const formData = data?.allFormInputVals?.data
setFormState(formData)
formData?.forEach((item, idx) => {
setValue(`${item.name}${idx}`, 'whatever')
})
}, [data])

react form input values are not showing correctly

i am working on a project and creating a form to create tours. everything is working fine just the issue is form input values are exchanging
for ex -
actual output- { tourName: 'pune darshan', location: '999', price: 'pune' }
expected output :- { tourName: 'pune darshan', location: 'pune', price: '999' }
i dont know where i am going wrong i am stuck here since 6 hrs
here is what i have tried
form component
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { createTour } from "../../store/slices/tourSlice";
import "./createListing.scss";
const CreateListing = () => {
const [tour, setTour] = useState({
tourName: "",
price: "",
location: "",
});
const dispatch = useDispatch();
const handleInput = (event) => {
setTour((tour) => ({
...tour,
[event.target.name]: event.target.value,
}));
};
const handleSubmit = (event) => {
event.preventDefault();
dispatch(createTour(tour.tourName, tour.price, tour.location));
};
return (
<div>
<div className='form-controller'>
<form action='' method='post' onSubmit={handleSubmit}>
<div className='form-group'>
<input
type='text'
className='form-control'
name='tourName'
placeholder='Enter Tour Name'
onChange={handleInput}
required
/>
</div>
<div className='form-group'>
<input
type='text'
className='form-control'
name='location'
placeholder='Enter Tour Location'
onChange={handleInput}
required
/>
</div>
<div className='form-group'>
<input
type='number'
className='form-control'
name='price'
placeholder='Enter Tour Cost'
onChange={handleInput}
required
/>
</div>
<div className='text-center'>
<button type='submit theme-btn'>Create Tour</button>
</div>
</form>
</div>
</div>
);
};
export default CreateListing;
here is the redux toolkit file
import { createSlice } from "#reduxjs/toolkit";
import axios from "axios";
import { history } from "./../../helpers/history";
export const initialState = {
tourName: "",
location: "",
price: "",
error: "",
loading: false,
};
const tourSlice = createSlice({
name: "tour",
initialState,
reducers: {
tourCreateRequest: (State, action) => {
return {
loading: true,
};
},
tourCreateSuccess: (state, action) => {
return { loading: false, tourInfo: action.payload };
},
tourCreateFail: (state, action) => {
return {
loading: false,
error: action.payload,
};
},
},
});
const {
tourCreateFail,
tourCreateRequest,
tourCreateSuccess,
} = tourSlice.actions;
export default tourSlice.reducer;
export const createTour = (tourName, location, price) => async (dispatch) => {
try {
dispatch(tourCreateRequest);
const tourData = {
tourName,
location,
price,
};
const res = await axios.post(
"http://localhost:3000/api/v1/tours",
tourData
);
if (res) {
dispatch(tourCreateSuccess);
// history.push("/dashboard");
} else {
dispatch(
tourCreateFail(
error.response && error.response.data.message
? error.response.data.message
: error.message
)
);
console.log("error");
}
} catch (error) {
dispatch(
tourCreateFail(
error.response && error.response.data.message
? error.response.data.message
: error.message
)
);
}
};
here is the model file
const mongoose = require("mongoose");
const tourSchema = mongoose.Schema(
{
tourName: { type: String },
rating: { type: String, default: 4.5 },
location: { type: String },
price: { type: String, default: 999 },
},
{ timestamps: {} }
);
const Tour = mongoose.model("Tour", tourSchema);
module.exports = Tour;
here is controller code
const createTours = async (req, res, next) => {
const { tourName, price, location } = req.body;
console.log(req.body);
try {
const newTour = new Tour({
tourName,
price,
location,
});
newTour.save();
res.status(200).json({
status: "success",
newTour,
});
} catch (error) {
res.status(404).json({
status: "failed",
error: error,
});
}
};

You pass the parameters in the createTour function in the wrong order.
You should update the dispatch line:
dispatch(createTour(tour.tourName, tour.location, tour.price));

Change password reducer in react app(axios + redux + jwt + bcrypt)

I want to change password, while I'm logged in.
Here's my function:
authActions.js(without catch because that will be implemented if anything start to works)
// Change password
export const changePassword = (newPassword) => (dispatch, getState) => {
// Headers
const config = {
headers: {
'Content-Type': 'application/json'
}
}
axios.post(`/api/auth/user/changePassword/`, newPassword, tokenConfig(getState))
.then(res => dispatch({
type: CHANGE_PASSWORD,
payload: res.data
}))
}
// Setup config/headers and token
export const tokenConfig = getState => {
// Get token from localstorage
const token = getState().auth.token;
// Headers
const config = {
headers: {
// "Accept": "application/json, multipart/form-data"
"Content-type": "application/json"
}
}
// If token, add to headers
if (token) {
config.headers['x-auth-token'] = token;
}
return config;
}
and authReducer.js:
...
const initialState = {
token: localStorage.getItem('token'),
isAuthenticated: false,
user: null
};
export default function (state = initialState, action) {
switch (action.type) {
...
case CHANGE_PASSWORD:
return {
...state,
token: null,
user: action.payload,
isAuthenticated: false,
isLoading: false
};
default:
return state;
}
}
and routes/api/auth.js
router.post('/user/changePassword/', (req, res) => {
console.log(req.body);
const { email, oldPassword, newPassword } = req.body
// find if old password is valid
User.findOne({ email })
.then(user => {
bcrypt.compare(oldPassword, user.password)
.then(isMatch => {
if (isMatch) {
// change to new password
user.password = newPassword
user
.save()
.then(newUser => {
res.status(200).send(newUser)
})
.catch(err => {
const message = err.message
res.status(500).json({
status: "change password failed",
msg: message
})
})
} else {
return res.status(401).send("Invalid old password")
}
})
})
.catch(err => {
res.status(500).send(err)
})
});
I have console.log(req.body); in routes just to check if anything works, but it don't works(didn't give me any message).
And component in the end(but it's not the source of problem):
import React, { useState, useEffect } from 'react';
import {
Button,
Modal,
ModalHeader,
ModalBody,
Form,
FormGroup,
Label,
Input,
NavLink
} from 'reactstrap';
import { connect } from 'react-redux';
import { changePassword } from '../../actions/authActions';
import PropTypes from 'prop-types';
const ChangePassword = ({ auth }) => {
const [modal, setModal] = useState(false);
const [enterPassword, setEnterPassword] = useState({
oldPassword: '',
newPassword: ''
});
const [takeEmail, setTakeEmail] = useState(null);
useEffect(() => {
const createArray = () => {
const { user } = auth;
setTakeEmail({ email: user.email });
};
createArray();
}, [auth.user]);
const toggle = () => {
setModal(!modal);
};
const onChange = e => {
setEnterPassword({
...enterPassword,
[e.target.name]: e.target.value
});
};
const onSubmit = (event) => {
event.preventDefault();
const { email } = takeEmail;
const { oldPassword, newPassword } = enterPassword;
console.log(enterPassword);
console.log(takeEmail);
const newUser = {
email,
oldPassword,
newPassword
}
// Add content via changePassword action
changePassword(newUser);
toggle();
}
return (
<div>
<NavLink onClick={toggle} href="#">
Change Password
</NavLink>
<Modal
isOpen={modal}
toggle={toggle}
className="open-modal"
>
<ModalHeader toggle={toggle}>Dodaj do listy ogłoszeń</ModalHeader>
<ModalBody>
<Form onSubmit={onSubmit}>
<FormGroup>
<Label for="oldPassword">Nagłówek</Label>
<Input
type="password"
name="oldPassword"
id="oldPassword"
placeholder="Wprowadź stare hasło..."
onChange={onChange}
/>
<Label for="newPassword">Nagłówek</Label>
<Input
type="password"
name="newPassword"
id="newPassword"
placeholder="Wprowadź stare hasło..."
onChange={onChange}
/>
<Button
color="dark"
style={{ marginTop: '2rem' }}
block>
Zmień hasło
</Button>
</FormGroup>
</Form>
</ModalBody>
</Modal>
</div>
);
}
ChangePassword.propTypes = {
isAuthenticated: PropTypes.bool,
changePassword: PropTypes.func.isRequired
}
const mapStateToProps = state => ({
auth: state.auth,
isAuthenticated: state.auth.isAuthenticated
});
export default connect(mapStateToProps, { changePassword })(ChangePassword);

How do I update state with axios put request on my React application? (React/Node Express)

I've been reviewing my HTTP/AJAX project and was able to implement my get, post and delete. But I tried to implement the put request on my own and have been stuck on it for two days (I know).
My understanding is that there should be the axios request in an event handler, and then you bind the handler. My put request has the id and is updating, but the id (friend.id) is only replaced by an empty string. Put request is working in the server and updates the data correctly. So I see my problem is in React.
I looked up help guides on editing state and applying it to the put request. I initialized editing: false as state, made a handler for setting editing to true and did an onChange on each input in the form for editing at the bottom. But I see that I'm not understanding how the handleUpdating event handler should connect with put (I commented them below), or if I needed it.
Here is my file hierarchy:
Here is the server's put request (located in server.js):
app.put('/friends/:id', (req, res) => {
const { id } = req.params;
let friendIndex = friends.findIndex(friend => friend.id == id);
if (friendIndex >= 0) {
friends[friendIndex] = { ...friends[friendIndex], ...req.body };
res.status(200).json(friends);
} else {
res
.status(404)
.json({ message: `The friend with id ${id} does not exist.` });
}
});
And here is the code in my React Application (located in Friendslist.js):
import React from 'react';
import axios from 'axios';
const API_URL = 'http://localhost:5000/friends';
class FriendsList extends React.Component {
constructor() {
super();
this.state = {
friends: [],
editing: false,
loading: true,
showComponent: false,
name: '',
age: '',
email: ''
}
}
componentDidMount() {
axios
.get(`${API_URL}`)
.then(response => {
console.log(response.data);
this.setState({ friends: response.data, loading: false });
})
.catch(error => {
console.log('There was an error', error);
})
}
onClickComponent = () => {
this.setState({ showComponent: true });
}
handleName = (event) => {
event.preventDefault();
this.setState({
name: event.target.value
});
}
handleAge = (event) => {
event.preventDefault();
this.setState({
age: event.target.value
});
}
handleEmail = (event) => {
event.preventDefault();
this.setState({
email: event.target.value
});
}
// handleUpdating - setting edit to true
handleUpdating = (event) => {
this.setState({ editing: true })
}
onClickComponent = () => {
this.setState({ showComponent: true });
}
handleDelete = (id) => {
axios
.delete(`${API_URL}/${id}`)
.then(response => {
this.setState({
friends: response.data
})
console.log(response.data)
})
.catch(error => {
console.log(error)
})
};
handleSubmit = (event) => {
event.preventDefault();
axios.post(`${API_URL}`, {
name: this.state.name,
age: this.state.age,
email: this.state.email
})
.then(response => {
this.setState({ friends: response.data });
})
.catch(error => {
console.log(error);
});
}
// This is the put request
handleEdit = (id) => {
axios.put(`${API_URL}/${id}`, {
name: this.state.name,
age: this.state.age,
email: this.state.email
})
.then(response => {
this.setState({ friends: response.data });
})
.catch(error => {
console.log(error);
});
}
render() {
if (this.state.loading) {
return <h1>Loading Friends....</h1>
} else if (!this.state.loading) {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleName} />
</label>
<label>
Age:
<input type="text" value={this.state.age} onChange={this.handleAge} />
</label>
<label>
Email:
<input type="text" value={this.state.email} onChange={this.handleEmail} />
</label>
<input type="submit" value="Submit" />
</form>
<div>{this.state.friends.map((friend) => {
return (
<div onChange={() => this.handleUpdating} key={friend.id} className="friend">
<div className="friend-name">{friend.name}</div>
<div className="friend-age">{`Age: ${friend.age}`}</div>
<div className="friend-email">{`Email: ${friend.email}`}</div>
<button onClick={() => this.handleDelete(friend.id)}>Delete</button>
<button onClick={this.onClickComponent}>Edit</button>
{this.state.showComponent ? <Form handleEdit={() => this.handleEdit(friend.id)} /> : null}
</div>
);
})}
</div>
</div>
);
}
}
}
const Form = (props) => {
return (
<form onSubmit={() => props.handleEdit(props.id)}>
<label>
Name: <input type="text" value={props.name} onChange={this.handleUpdating} />
</label>
<label>
Age: <input type="text" value={props.age} onChange={this.handleUpdating} />
</label>
<label>
Email: <input type="text" value={props.email} onChange={this.handleUpdating} />
</label>
<input type="submit" value="Update" />
</form>
);
}
export default FriendsList;
I appreciate any help and/or feedback!

enter code here
import { connect } from 'react-redux';
import api from '../../services/api';
import * as actions from '../../store/actions';
updateTool = (id) => {
console.tron.log('edit !!!');
this.setState({ isEdit: true });
const modifyTool = {
id: this.props.id,
title: this.state.title,
link: this.state.link,
description: this.state.description,
tags: this.state.tags,
};
api
.put(`/tools/${id}`, modifyTool)
.then((res) => {
console.log(res.data);
})
.catch((error) => {
console.log(error);
});
};
{/* form Modal Update */}
<section>
<Modal
visible={this.state.showModal}
width="400"
height="370"
effect="fadeInUp"
onClickAway={() => this.closeModal()}
>
<FormModal>
<form onSubmit={this.updateTool}>
<div>
<span>Update tool</span>
<label>Tool Name</label>
<input
type="text"
onChange={this.handleChange}
value={tool.title}
name="title"
/>
<label>Tool Link</label>
<input
type="text"
onChange={this.handleChange}
value={this.props.link}
name="link"
/>
<label>Tool description</label>
<textarea
cols={20}
rows={5}
name="description"
onChange={this.handleChange}
value={this.state.description}
/>
<label>Tags</label>
<input
type="text"
onChange={this.handleChange}
value={this.state.tags}
name="tags"
/>
</div>
<AlignHorizontalRight>
<button>Cancel</button>
<div>
<input
type="button"
value="EDIT"
type="submit"
onClick={() => this.updateTool(tool.id)}
/>
</div>
</AlignHorizontalRight>
</form>
</FormModal>
</Modal>
</section>
const mapDispatchToProps = dispatch => ({
removeTool: (id) => {
dispatch(actions.removeTool(id));
},
updateTool: (id, title, link, description, tags) => {
dispatch(actions.updateTool(id, title, link, description, tags));
},
});
export default connect(
null,
mapDispatchToProps,
)(Content);
actions/index.js
export const ADD_TOOL = 'ADD_TOOL';
export const REMOVE_TOOL = 'REMOVE_TOOL';
export const UPDATE_TOOL = 'UPDATE_TOOL';
const nextId = 0;
export function addTool(title, link, description, tags) {
return {
type: ADD_TOOL,
id: nextId,
title,
link,
description,
tags,
};
}
export function removeTool(id) {
return {
type: REMOVE_TOOL,
id,
};
}
export function updateTool(id, title, link, description, tags) {
return {
type: UPDATE_TOOL,
id,
title,
link,
description,
tags,
};
}
store/index.js
import { createStore } from 'redux';
const store = createStore(() => {});
export default store;
reducers/index.js
import { combineReducers } from 'redux';
import tool from './tool';
const store = combineReducers({
tool,
});
export default store;
reducers/tool.js
import { ADD_TOOL, REMOVE_TOOL, UPDATE_TOOL } from '../actions';
const INITIAL_STATE = [];
export default function Tool(state = INITIAL_STATE, action) {
switch (action.type) {
case ADD_TOOL:
return [
...state,
{
id: action.id,
title: action.title,
link: action.link,
description: action.description,
tags: action.tags,
},
];
case REMOVE_TOOL:
return state.filter(({ id }) => id !== action.id);
case UPDATE_TOOL:
return state.map(tool => (tool.id === action.id ? { ...tool, ...action } : tool));
default:
return state;
}
}
enter code here
=================================
friend Dev, here is all the data I developed to create a CRUD and with me it worked fine, I'm just having difficulty clicking a record, and this record appears in the form to edit, the main one is doing what it is, API data.
Good luck in your studies.
NOTE: I'm assuming that you already know how to use the data described above, it's not in the order, but just coding or paste correctly will work.