We Keep Coding

How to push values into an array on submit btn click (react js)

I have a questions form with custom inputs.
const Input = (props) => {
return (
<div>
<label className={classes.label}>{props.label}
<input className={classes.input} {...props}/>
</label>
</div>
);
};
I get question list from server and set them into questions. Then I create a form for answer to these questions.
<form onSubmit = {onAnswersSubmit}>
{questions?.map((item) =>
<Input key={item.id} id={item.id} label={item.question}/>)}
<Button> Submit </Button>
</form>
I'd like to push answers from inputs into array on submit button click, but have no idea how to do that.

You should probably use state for this. One state for the array (I've called it state), and another to capture the answers to the questions (an object).
When an input's onChange listener is fired it calls handleChange. This function takes the name and value from the input (note: this example assumes that you can add a name property to the data you receive from your server), and then updates the answers state.
When the button is clicked the completed answers state (an object) gets added to the main state array.
const { useEffect, useState } = React;
function Example({ data }) {
// Initialise the states
const [ state, setState ] = useState([]);
const [ answers, setAnswers ] = useState({});
// Push the completed answers object into
// the state array, then reset the answers state
function handleClick() {
setState([ ...state, answers ]);
setAnswers({});
}
// Get the name and value from the input
// and update the answers state
function handleChange(e) {
const { name, value } = e.target;
setAnswers({ ...answers, [name]: value });
}
// Log the main state when it changes
useEffect(() => console.log(state), [state]);
return (
<div>
{data.map(obj => {
const { id, name, question } = obj;
return (
<input
key={id}
name={name}
placeholder={question}
onChange={handleChange}
/>
);
})}
<button onClick={handleClick}>Submit</button>
</div>
);
}
const data = [
{ id: 1, name: 'name', question: 'What is your name?' },
{ id: 2, name: 'age', question: 'How old are you?' },
{ id: 3, name: 'location', question: 'Where do you live?' }
];
ReactDOM.render(
<Example data={data} />,
document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

You can use the html input's onChange prop and pass an onChange function from your parent form to handle that like so:
// This is assuming this is inside a functional component
const [answers, setAnswers] = useState([]);
const onAnswerChange = useCallback((index, answer) => {
setAnswers((oldAnswers) => {
oldAnswers[index] = answer;
return oldAnswers;
});
}, [setAnswers]);
return
<form onSubmit = {onAnswersSubmit}>
{questions?.map((item, index) =>
<Input key={item.id}
id={item.id}
label={item.question}
value={answers[index] ?? ''}
onChange={(e) => onAnswerChange(index, evt.target.value)}/>)}
<Button> Submit </Button>
</form>
Then you can use the stored state in answers as part of your onAnswersSubmit callback.

const [answers, setAnswers] = useState([]);
const handleAnswerChange = (index, answer) => {
let olddata=answers;
olddata[index]=answer;
setAnswers([...olddata]);
}
const Input = (props) => {
return (
<div>
<label className={classes.label}>{props.label}
<input className={classes.input} {...props}/>
</label>
</div>
);
};
<form onSubmit = {onAnswersSubmit}>
{questions?.map((item) =>
<Input key={item.id} id={item.id} label={item.question} onChange={handleAnswerChange}/>)}
<Button> Submit </Button>
</form>

placing input values into array object

I have two components. One components renders a "title" input.
The other component renders a "note" input with 2 buttons.
I have the title input values stored in state called "title"
I have the note input value stored in state called "note"
Now i'm trying to get my title and note values in an object like so:
const [completedNote, setCompletedNote] = useState([{ id=1, title: "", note=""}])
//App component
import React, { useState } from "react"
import NoteTitle from "./components/note-title/NoteTitle";
export default function App() {
const [title, setTitle] = useState("");
const [note, setNote] = useState("");
const [completedNote, setCompletedNote] = useState([
{ id: 1, title: "", note: "" },
]);
return (
<NoteTitle
title={title}
setTitle={setTitle}
note={note}
setNote={setNote}
/>
);
}
//Title Component
import React, { useState } from "react";
import Note from "../note/Note";
export default function NoteTitle({ title, setTitle, note, setNote }) {
return (
<>
<div className="note-maker__maincontainer">
<div className="note-maker__sub-container">
<div className="note-maker__input-container" ref={wrapperRef}>
<div className="note-maker__title">
<input
id="input_title"
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Title..."
onClick={() => setIsNoteDisplayed(true)}
/>
</div>
<Note note={note} setNote={setNote} />
</div>
</div>
</div>
</>
);
}
// Note Component
import React from "react";
export default function Note({ note, setNote }) {
return (
<>
<div className="note__container">
<div className="note-maker__note">
<input
id="input_note"
type="text"
value={note}
onChange={(e) => setNote(e.target.value)}
placeholder="Take a note..."
/>
</div>
<div className="note-maker__buttons-container">
<button className="note-maker__submit-button" type="submit">
Submit
</button>
<button className="note-maker__close-button">Close</button>
</div>
</div>
</>
);
}
How would I go about doing this? I have tried this but its causing "error: To many renders"
setCompletedNote((prevState) =>({
title:{
...prevState.title,
[title]: title,
note:{
...prevState.note,
[note]: note
}
}
}))
Thanks in advance!

If you just want to add a new Completed Note then
Note: Use some library like uuid to generate id and don't do it like below :)
// You have to initiate just an empty array
const [completedNote, setCompletedNote] = useState([]);
// Call this function on submit
const addCompletedNote = () => {
// TODO: validate note and title are not empty
// Add new object to state
setCompletedNote((prevState) => [
...prevState,
{ id: Date.now(), note: note, title: title }
]);
// Clean up existing state
setTitle("");
setNote("");
// Note: this above clean-up triggers state updates 2 times which is not that good but works :) .
// TODO: so try to solve it by combining title, note and completedNote to be a single state object
// like this => { title: "", note: "", completedNote: [] }
// This above change requires a lot of extra changes to work (Try figuring them out :))
}
If you want to update title and note of an existing Completed Note, you need id, newTitle, and newNote values. You update the value of the object that matches the input id.
const updateCompletedNote = (id, newTitle, newNote) => {
setCompletedNote((prevState) => prevState.map(n) => {
if (n.id === id) { // match the id here
return {...n, title: newTitle, note: newNote}; // return new object
}
return n; // objects that do not match id are returned as it is
});
}
You can also update just note or just title But you always need id of the object.
Lets say if you want to just update title of the object you need both id and newTitle and return
return {...n, title: newTitle };
instead of
return {...n, title: newTitle, note: newNote};

Your setCompletedNote function is missing the last closing parenthesis )
You should pass in the arrow function enclosed in curly braces to prevent an infinite loop:
setCompletedNote({
(prevState) => ({
title: {
...prevState.title,
[title]: title,
note: {
...prevState.note,
[note]: note
}
}
})
})

How do I add an list element seperately to 2 lists?

I am pretty new to react. So I have one parent component which has two child components. These 2 children are the lists that should be displayed. So far I figured out how to transfer the data between two lists by checking the status property of the data. I am not able to understand how to add data into the separate lists and edit them since the parent component renders the 2 lists. Can anyone explain how to add and edit new data that the user will enter? Should I create new states and props on the Items page or should I create them on the child component page? I am pretty confused.
import React,{useState,useEffect} from 'react'
import { Completed } from './Completed'
import { Pending } from './Pending'
export const Items = () => {
const [items,setItems]=useState([
{
id: 1,
title:'Workout',
status:'Pending'
},
{
id: 2,
title:'Read Books',
status:'Pending'
},
{
id: 3,
title:'Cook Pizza',
status:'Pending'
},
{
id: 4,
title:'Pay Bills',
status:'Completed'
},
{
id: 5,
title:' Watch Big Short',
status:'Completed'
},
{
id: 6,
title:' Make nutrition Plan',
status:'Pending'
}
])
const updateStatus=(id,newStatus)=>{
let allItems=items;
allItems=allItems.map(item=>{
if(item.id===id){
console.log('in here')
item.status=newStatus;
}
return item
})
setItems(allItems)
}
return (
<div class="items">
<Pending items={items} setItems={setItems} updateStatus={updateStatus}/>
<Completed items={items} setItems={setItems} updateStatus={updateStatus}/>
</div>
)
}
import React from 'react'
export const Pending = ({items,setItems,updateStatus}) => {
return (
<div className="pending">
<h1>LEFT</h1>
{
items && items.map(item=>{
if(item && item.status==='Pending')
return <><p className="item" key={item.id}>{item.title} <button className="mark_complete" key={item.id} onClick={()=>{updateStatus(item.id,'Completed')}}>Move Right</button></p></>
})
}
</div>
)
}
import React from 'react'
export const Completed = ({items,setItems,updateStatus}) => {
return (
<div className="completed">
<h1>RIGHT</h1>
<form onSubmit={this.addItem}>
<input placeholder="enter task">
</input>
<button type="submit">add</button>
</form>
{
items && items.map(item=>{
if(item && item.status==='Completed')
return <><p className="item" key={item.id}>{item.title} <button className="mark_pending" key={item.id} onClick={()=>{updateStatus(item.id,'Pending')}}> Move Left</button></p> </>
})
}
</div>
)
}
I have attached the 3 components which are Items, Pending and Completed above.

It's almost always better to have the state in the parent and pass down props to the children. So you want to keep your items state where it is. You can create an addItem function and pass it down as a prop to any child.
I don't think it makes sense to be able to add items from both lists since new items should be 'Pending'. So I would recommend that you put your add form in a new component AddItem which would be a third child of Items. Once AddItem calls the addItem function from props, that item will get saved to the state in items and it will show up in the Pending list automatically.
If all new items have status 'Pending' then the only information that we should need to add an item is the title of the task.
This function goes in Items:
const addItem = (title) => {
// set state using a callback function of current state
setItems((current) => {
// the highest number of all current ids, or 0 if empty
const maxId = current.reduce((max, o) => Math.max(max, o.id), 0);
// the next id is the max plus 1
const id = maxId + 1;
// add new item to the current - concat won't mutate the array
return current.concat({
id,
title,
status: "Pending"
});
});
};
Your AddItem component uses a controlled input to create the text for the new item.
export const AddItem = ({ addItem }) => {
const [title, setTitle] = useState("");
const handleSubmit = (e) => {
// prevent form submission from reloading the page
e.preventDefault();
// call the addItem function with the current title
addItem(title);
// clear the form
setTitle("");
};
return (
<form onSubmit={handleSubmit}>
<input
placeholder="enter task"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<button type="submit">add</button>
</form>
);
};
Inside the return of Items, include your form:
<AddItem addItem={addItem} />
Unrelated to the question at hand, there are a few other improvements that you can make to your code.
Your updateStatus function actually mutates the current item. You should instead create a new object for the changed item by copying everything except the status.
You are getting warnings about unique keys because the key must be on the outermost component inside the .map(). You put a fragment <> outside the <p> which has the key, so remove the fragment.
In my opinion the filtering of which item goes in each list should be done by the parent. Your Completed and Pending components are extremely similar. You should combine them into one component. Everything that is different between the two, such as texts and class names, can be controlled by the props that you pass in.
import React, { useState } from "react";
export const ItemsList = ({
items,
title,
className,
buttonText,
onClickButton
}) => {
return (
<div className={className}>
<h1>{title}</h1>
{items.map((item) => (
<p className="item" key={item.id}>
<span className="item_title">{item.title}</span>
<button
className="move_item"
key={item.id}
onClick={() => {
onClickButton(item.id);
}}
>
{buttonText}
</button>
</p>
))}
</div>
);
};
// example of how to compose components
// this keeps the same setup that you had before, but without repeated code
export const Completed = ({ items, updateStatus }) => {
return (
<ItemsList
title="RIGHT"
buttonText="Move Left"
className="completed"
items={items.filter((item) => item.status === "Completed")}
onClickButton={(id) => updateStatus(id, "Pending")}
/>
);
};
export const AddItem = ({ addItem }) => {
const [title, setTitle] = useState("");
const handleSubmit = (e) => {
// prevent form submission from reloading the page
e.preventDefault();
// call the addItem function with the current title
addItem(title);
// clear the form
setTitle("");
};
return (
<form onSubmit={handleSubmit}>
<input
placeholder="enter task"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<button type="submit">add</button>
</form>
);
};
export const Items = () => {
const [items, setItems] = useState([
{
id: 1,
title: "Workout",
status: "Pending"
},
{
id: 2,
title: "Read Books",
status: "Pending"
},
{
id: 3,
title: "Cook Pizza",
status: "Pending"
},
{
id: 4,
title: "Pay Bills",
status: "Completed"
},
{
id: 5,
title: " Watch Big Short",
status: "Completed"
},
{
id: 6,
title: " Make nutrition Plan",
status: "Pending"
}
]);
const addItem = (title) => {
// set state using a callback function of current state
setItems((current) => {
// the highest number of all current ids, or 0 if empty
const maxId = current.reduce((max, o) => Math.max(max, o.id), 0);
// the next id is the max plus 1
const id = maxId + 1;
// add new item to the current - concat won't mutate the array
return current.concat({
id,
title,
status: "Pending"
});
});
};
const updateStatus = (id, newStatus) => {
setItems((current) =>
// arrow function without braces is an implicit return
current.map((item) =>
item.id === id
? // copy to new item if id matches
{
...item,
status: newStatus
}
: // otherwise return the existing item
item
)
);
};
return (
<div className="items">
<AddItem addItem={addItem} />
{/* can set the props on ItemsList here */}
<ItemsList
title="LEFT"
buttonText="Move Right"
className="pending"
items={items.filter((item) => item.status === "Pending")}
// create a function that just takes the `id` and sets the status to "Completed"
onClickButton={(id) => updateStatus(id, "Completed")}
/>
{/* or do it in a separate component */}
<Completed items={items} updateStatus={updateStatus} />
</div>
);
};
export default Items;
Code Sandbox Link

How can i add and remove elements from array on click in reactjs?

I'm trying to create a function that renders an array of links and i want to create a text input and a button that adds value from input in the array. I got the links saved in the state in the object that looks like this:
sourceLinks: {
0: "https://www.w3schools.com/html/"
1: "https://www.apachefriends.org/docs/"
2: "https://docs.moodle.org/38/en/Windows_installation_using_XAMPP"
}
I've managed to render the links like this:
renderLinks() {
let sessionLinks = this.state.sessionLinks;
let links = [];
Object.values(sessionLinks).map((link) => {
links.push(<div className="column">
<span>
<InputPreview inputValue={link} classes="w-300" />
</span>
</div>)
})
return links;
}
InputPreview is the component i use for displaying links. I'm tryin to add a text input and a button bellow the rendered links that adds the value to the array, and an icon next to every link that removes it from an array. I'm trying to do it all in one function renderLinks() and then call it in render. I know i have to push and slice items from an array and update the state but i'm strugling cause i just started learning react. Please help :)

You can add and render links with below code.
import React from "react";
class ItemList extends React.Component {
state = {
links: ["item1"],
newItem: ""
};
submit(e, newLink) {
e.preventDefault();
let updatedLinks = this.state.links;
updatedLinks.push(newLink);
this.setState({ links: updatedLinks });
}
render() {
return (
<React.Fragment>
<ul>
{this.state.links?.map((link, i) => (
<li key={i}>
<p>{link}</p>
</li>
))}
</ul>
<form onSubmit={(e) => this.submit(e, this.state.newItem)}>
<input
type="text"
value={this.state.newItem}
onChange={(e) => this.setState({ newItem: e.target.value })}
/>
<button type="submit">ADD</button>
</form>
</React.Fragment>
);
}
}
export default ItemList;
Let me know for further clarificaton.

This is a example with functional components and hooks
import React, { useState } from 'react';
const sourceLinks = [
'https://www.w3schools.com/html/',
'https://www.apachefriends.org/docs/',
'https://docs.moodle.org/38/en/Windows_installation_using_XAMPP',
];
export const ListLinks = () => {
const [links, setLinks] = useState(sourceLinks);
const [newLink, setNewLink] = useState('');
const handleAdd = () => {
setLinks(links => [...links, newLink]);
};
const handleChangeNewLink = e => {
const { value } = e.target;
setNewLink(value);
};
return (
<div>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<input type='text' value={newLink} onChange={handleChangeNewLink} />
<button onClick={handleAdd}>Add</button>
</div>
<br />
{links.map((link, index) => (
<p key={index}>{link}</p>
))}
</div>
);
};
This is the result:
Lastly, read the documentation, managing the state is essential.

Deleting an item in ReactJS

I'm new to React and made an app that allows searches to be saved. This will pull JSON but is currently pulling from a static array data. I'm having trouble being able to delete searches from the search list.
Here's the jsbin: http://jsbin.com/nobiqi/edit?js,output
Here's my delete button element:
var DeleteSearch = React.createClass({
render: function() {
return (
<button onClick="this.props.deleteSearchItem" value={index}><i className="fa fa-times"></i>
</button>
);
}
});
and my function
deleteSearchItem: function(e) {
var searchItemIndex = parseInt(e.target.value, 10);
console.log('remove task: %d', searchItemIndex);
this.setState(state => {
state.data.splice(searchItemIndex, 1);
return { data: state.data };
});
}
I've tried following tutorials and I'm not sure where to go from here. How can I delete the search items?

Let me guess, Are you looking for something like this?
class Example extends React.Component {
constructor(){
this.state = {
data: [
{id:1, name: 'Hello'},
{id:2, name: 'World'},
{id:3, name: 'How'},
{id:4, name: 'Are'},
{id:5, name: 'You'},
{id:6, name: '?'}
]
}
}
// shorter & readable
delete(item){
const data = this.state.data.filter(i => i.id !== item.id)
this.setState({data})
}
// or this way, it works as well
//delete(item){
// const newState = this.state.data.slice();
// if (newState.indexOf(item) > -1) {
// newState.splice(newState.indexOf(item), 1);
// this.setState({data: newState})
// }
//}
render(){
const listItem = this.state.data.map((item)=>{
return <div key={item.id}>
<span>{item.name}</span> <button onClick={this.delete.bind(this, item)}>Delete</button>
</div>
})
return <div>
{listItem}
</div>
}
}
React.render(<Example />, document.getElementById('container'));
In this example pay attention how i'm binding delete method and pass there new parameter. fiddle
I hope it will help you.
Thanks

OP here. Since I know more about React four years later and this still gets views I figured I'd update this with how I'd go about it now.
SavedSearches.js
import React from 'react'
import { SearchList } from './SearchList'
let data = [
{index: 0, name: "a string", url: 'test.com/?search=string'},
{index: 1, name: "a name", url: 'test.com/?search=name'},
{index: 2, name: "return all", url: 'test.com/?search=all'}
];
let startingIndex = data.length;
export class SavedSearches extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
url: '',
index: startingIndex,
data: data
}
this.deleteSearch=this.deleteSearch.bind(this)
}
deleteSearch(deleteThis) {
console.log(deleteThis);
let newData = this.state.data.filter( searchItem => searchItem.index !== deleteThis.index )
this.setState({
data: newData
})
}
render() {
return (
<div className="search-container">
<SearchList data={this.state.data} onDelete={this.deleteSearch}/>
</div>
)
}
}
Here I created a method called deleteSearch that takes an object as a parameter. It then runs .filter on the this.state.data array to create a new array that includes all items that don't meet the condition. The condition checks if the id of each object in the data array matches the id of the parameter. If so, then it is the one that is being deleted. The new array that is created by .filter is set to a variable called newData, and then I update the state with the newData array.
I then pass this method to the SearchList component in a prop called onDelete.
This method is also bound in the constructor using .bind() so that this will refer to the correct this when the method is passed down the component tree.
SearchList.js
import React from 'react'
import { SearchItem } from './SearchItem'
export class SearchList extends React.Component {
render() {
let searchItems = this.props.data.map((item, i) => {
return (
<SearchItem index={i} searchItem={item} url={item.url} onDelete={this.props.onDelete}>
{item.name}
</SearchItem>
);
});
return (
<ul>
{searchItems}
</ul>
);
}
}
My deleteSearch method is just passing through the component tree here. SearchList receives the method as a props this.props.onDelete and passes it to SearchItem.
The other major key here is that the parameter in the map function is being passed as props: searchItem={item}. This will allow the entire current object to be accessed via props; and if you remember, my deleteSearch function takes an object as a parameter.
SearchItem.js
import React from 'react'
export class SearchItem extends React.Component {
constructor(props) {
super(props);
this.handleDelete=this.handleDelete.bind(this)
}
handleDelete() {
this.props.onDelete(this.props.searchItem)
}
render() {
return (
<li key={this.props.index}> {/* Still getting a console error over this key */}
<a href={this.props.url} title={this.props.name}>
{this.props.children}
</a>
({this.props.url})
<button onClick={this.handleDelete} value={this.props.index}><i className="fa fa-times"></i>
</button>
</li>
);
}
};
Now my method arrives where it will be used. I create a handler method handleDelete and inside I access the deleteSearch method with this.props.onDelete. I then pass it the object of the list item that is being clicked on with this.props.searchItem.
In order for this to work when a user clicks, I had to add an onClick event listener that calls my handler method, like this: onClick={this.handleDelete}. The final step is to bind this.handleDelete in the SearchItem constructor method.
Now, clicking on the button will remove the item from the this.state.data array. For an example of how to add an item to the array, see my repository

Are you looking for somthing like this?
Todos.js
import React from 'react'
import {TodoItem} from "./TodoItem";
export const Todos = (props) => {
let myStyle = {
minHeight: "70vh",
margin: "40px auto"
}
return (
<div className="container" style={myStyle}>
<h3 className="my-3">List</h3>
{props.todos.length===0? "No records to display":
props.todos.map((todo)=>{
console.log(todo.sno);
return (<TodoItem todo={todo} key={todo.sno} onDelete={props.onDelete}/>
)
})
}
</div>
)
}
TodoItem.js
import React from 'react'
export const TodoItem = ({todo, onDelete}) => {
return (
<>
<div>
<h4>{todo.title}</h4>
<p>{todo.desc}</p>
<button className="btn btn-sm btn-danger" onClick={()=>{onDelete(todo)}}>Delete</button>
</div>
<hr/>
</>
)
}
Please see the repository, here you can find add ,delete and list items