Trying to learn Redux. I am building a list app. From the home screen you can see all your lists and click on one to update. You can also create a new list.
So I've made a check to see if you navigate to the list component with data, the action upon 'save' will be UPDATE_LIST. If you navigate to the list component with no data, the action upon 'save' will be NEW_LIST. The new list works but the update does not. If you need to see more files, let me know. Thank you.
This is the list component:
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { connect } from 'react-redux';
import { newList, updateList } from '../store/tagActions';
class List extends React.Component {
constructor(props){
super(props);
this.state = {
title: '',
tags: [],
mentions: [],
tagValue: '',
mentionValue: '',
id: null
}
}
submitTag = (text) => {
this.setState({
tags: [
...this.state.tags,
text
],
tagValue: ''
})
}
submitMention = (text) => {
this.setState({
mentions: [
...this.state.mentions,
text
],
mentionValue: ''
})
}
componentDidMount() {
if (this.props.route.params.data !== null) {
const { title, tags, mentions, id } = this.props.route.params
this.setState({
id: id,
title: title,
tags: tags,
mentions: mentions
})
} else return
}
save = () => {
if (this.props.route.params.data !== null) {
this.props.updateList(
id = this.state.id,
title = this.state.title,
tags = this.state.tags,
mentions = this.state.mentions
)
} else {
this.props.newList(
title = this.state.title,
tags = this.state.tags,
mentions = this.state.mentions
)
}
this.props.navigation.navigate('Home');
}
render() {
return (
<View style={styles.container}>
<TextInput //==================================== TITLE
value={this.state.title}
style={styles.title}
placeholder='add Title..'
onChangeText={text => this.setState( {title: text} ) }
/>
<View style={styles.allTags}>
<Text>{this.state.id}</Text>
<View style={styles.tagsList}>
{
this.state.tags.map((tag => (
<Text key={tag} style={styles.tags}>#{tag}</Text>
)))
}
</View>
<View style={styles.mentionsList}>
{
this.state.mentions.map((mention => (
<Text key={mention} style={styles.mentions}>#{mention}</Text>
)))
}
</View>
</View>
<TextInput // =================================== TAGS
value={ this.state.tagValue }
style={styles.tagsInput}
placeholder='add #Tags..'
placeholderTextColor = "#efefef"
autoCorrect = { false }
autoCapitalize = 'none'
onChangeText={text => this.setState( {tagValue: text}) }
onSubmitEditing={() => this.submitTag(this.state.tagValue)}
/>
<TextInput //===================================== MENTIONS
value={ this.state.mentionValue }
style={styles.mentionsInput}
placeholder='add #Mentions..'
placeholderTextColor = "#efefef"
autoCorrect = { false }
autoCapitalize = 'none'
onChangeText={text => this.setState( {mentionValue: text})}
onSubmitEditing= {() => this.submitMention(this.state.mentionValue)}
/>
<Button
title='save'
onPress={() => {
this.save();
}
}
/>
</View>
)
}
}
const mapStateToProps = (state) => {
return { state }
};
export default connect(mapStateToProps, { newList, updateList }) (List);
tagActions.js
let nextId = 0;
export const newList = (title, tags, mentions) => (
{
type: 'NEW_LIST',
payload: {
id: ++nextId,
title: title,
tags: tags,
mentions: mentions
}
}
);
export const updateList = (title, tags, mentions, id) => (
{
type: 'UPDATE_LIST',
payload: {
id: id,
title: title,
tags: tags,
mentions: mentions
}
}
);
tagReducer.js:
const tagReducer = (state = [], action) => {
switch (action.type) {
case 'NEW_LIST':
//add tags and mentions later
const { id, title, tags, mentions } = action.payload;
return [
...state,
{
id: id,
title: title,
tags: tags,
mentions: mentions
}
]
case 'UPDATE_LIST':
return state.map((item, index) => {
if (item.id === action.payload.id) {
return {
...item,
title: action.payload.title,
tags: action.payload.tags,
mentions: action.payload.mentions
}
} else { return item }
})
default:
return state;
}
};
export default tagReducer;
By sending args like so
export const updateList = (title, tags, mentions, id) => (
In the scope of the function, the first arg that the function will be called with gonna be title, and even by doing something like this
this.props.updateList(
id = this.state.id,
title = this.state.title,
tags = this.state.tags,
mentions = this.state.mentions
)
what you sent as this.state.id, gonna be evaluate as title. (not python alert)
so you have two options, either organize args as in function, or send object with keys
this.props.updateList({
id: this.state.id,
title: this.state.title,
tags: this.state.tags,
mentions: this.state.mentions
})
export const updateList = ({title, tags, mentions, id}) => (
Anyhow, of course you can use array as data structure for state, sorry I mislead you
const tagReducer = (state = [], action) => {
switch (action.type) {
const { id, title, tags, mentions } = action.payload || {};
case 'NEW_LIST':
//add tags and mentions later
return [ ...state, { id, title, tags, mentions } ]
case 'UPDATE_LIST':
return state.map(item =>
item.id === id ? { ...item, title, tags, mentions} : item
)
default: return state;
}
};
export default tagReducer;
Related
I have following reducer:
const INITIAL_STATE = {
wallets: [],
selectedAccount: null,
selectedNetwork:null
};
export const setActive = (id, payload) => ({
type: actionTypes.SET_ACTIVE,
id,
payload,
});
const editItem = wallets.map(item => (item.id !== action.id ? {
...item, active: false } : { ...item, active: true }));
case actionTypes.SET_ACTIVE:
return {
...state,
accounts: [...state.wallets,editItem],
selectedAccount: action.payload,
};
I console.logged everything and store is being updated but the problem is my component is not re-rendering for some reason.
setActiveFunc = item => {
const { actions } = this.props;
const selectedAcc = {
name: item.name,
address: item.address,
active: item.active,
id: item.id,
};
actions.setActive(item.id, selectedAcc);
};
const UserMenuAccount = ({ active, account, balance }) => (
<View style={styles.accountContainer}>
<Image
source={require('../../../assets/Usermenu/check.png')}
style={[styles.icon, { opacity: active ? 1 : 0 }]}
/>
<Text style={styles.text}>{account}</Text>
<Text style={[styles.text, { opacity: 0.5 }]}>
{balance}
{' '}
ETH
</Text>
</View>
);
class UserMenuAccounts extends Component {
setActiveFunc = item => {
const { actions } = this.props;
const selectedAcc = {
name: item.name,
address: item.address,
active: item.active,
id: item.id,
};
actions.setActive(item.id, selectedAcc);
};
render() {
const { GetWallets } = this.props;
return (
<View>
{GetWallets.map(users => (
<TouchableOpacity
onPress={() => {
this.setActiveFunc(users);
}}
key={users.id}
>
<UserMenuAccount
account={`${users.name}`}
balance={0}
active={users.active}
key={users.id}
/>
</TouchableOpacity>
))}
</View>
);
}
}
The function shall create checked icon once active=true and even tho reducer is doing its thing the icon is not appearing
This is the function I'm using in the component, any suggestions?
You forgot to add the 'accounts' in the initial state of your reducer:
const INITIAL_STATE = {
wallets: [],
accounts: [],
selectedAccount: null,
selectedNetwork:null
};
accounts: [...state.wallets,editItem],
should rather be
accounts: state.wallets.map(item => (item.id !== action.id ? { ...item, active: false } : { ...item, active: true }));
see map will create a new array above you were spreading an array and inserting another inside it
I cannot get my reducer to update. I can step into the action when I fire this.completeQuiz(id) in my debugger but my state doesn't get updated. Any ideas?
import {
submitAnswer,
resetQuiz,
nextQuestion,
completeQuiz
} from "../actions/videos";
class TestYourselfScreen extends React.Component {
constructor(props) {
super(props);
this.onCapture = this.onCapture.bind(this);
}
completeQuiz = id => {
let video = this.props.videos.find(obj => obj.id == id);
let correctAnswers = video.results.correctAnswers;
const questionsFiltered = video.questions.filter(obj => obj.question != "");
completeQuiz({
id,
totalScore: correctAnswers.length / questionsFiltered.length
});
};
render() {
.....
return (
{questionsFiltered.length > 0 && !completed && (
<View
style={{
flex: 1
}}
>
....
<Button
title={lastQuestion ? "Finish" : "Next"}
buttonStyle={[styles.button]}
disabled={
!results.correctAnswers.includes(current) &&
!results.incorrectAnswers.includes(current)
? true
: false
}
onPress={() =>
lastQuestion ? this.completeQuiz(id) : this.next(id, current)
}
/>
</View>
)}
{completed === true && (
<View
style={{
flex: 1
}}
>
<ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }}>
...
</View>
)}
</ScrollView>
);
}
}
const mapStateToProps = state => {
return {
videos: state.tcApp.videos
};
};
const mapDispatchToProps = dispatch => ({
submitAnswer: data => dispatch(submitAnswer(data)),
resetQuiz: id => dispatch(resetQuiz(id)),
nextQuestion: data => dispatch(nextQuestion(data)),
completeQuiz: data => dispatch(completeQuiz(data))
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(TestYourselfScreen);
Action:
export const completeQuiz = data => ({
type: "COMPLETE",
data
});
Reducer:
import { trimText } from "../helpers";
export function tcApp(
state = { videos: [], search: { videos: [], term: "" } },
action
) {
switch (action.type) {
....
case "COMPLETE": {
const { completed, totalScore, id } = action.data;
return {
videos: state.videos.map(video =>
video.id === id
? {
...video,
results: {
totalScore
},
completed: true
}
: video
),
search: { term: "", videos: [] }
};
}
default:
return state;
}
}
I think your action is available through props do it as this
completeQuiz = id => {
let video = this.props.videos.find(obj => obj.id == id);
let correctAnswers = video.results.correctAnswers;
const questionsFiltered = video.questions.filter(obj => obj.question != "");
this.props.completeQuiz({
id,
totalScore: correctAnswers.length / questionsFiltered.length
});
};
because we mapDispatchToProps
Hope it helps
I'm scratching my head on this one. And i find it's also not easy to explain. I'll do my best:
I have an html table, each row has an image and, amongst other elements, also a select dropdown with a top 10 list, to rank the image.
When a user selects a ranking, the database gets updated accordingly ->
The current image top 10 ranking is saved in the image entry, and the rank of the former image to inherit the position gets updated to 'null'. (this is already working -> so if I reload the page, everything turns up fine).
What I'm unable to achieve, is for the updated images array that I receive back from the db to update the state (or the props) and therefor the selected option value of the image that formerly inherited the rank.
Here's my ImageList Component (the important parts):
class ImageList extends Component {
constructor(props) {
super(props)
this.state = {
project: [],
description: '',
name: '',
values: [],
value: '',
positions: props.positions
}
}
updatePosition = (projectId, projectName, imageId, imgName, i, e) => {
this.props.setGridPosition(
projectId,
projectName,
imageId,
imgName,
e.target.value
)
}
getAllImages() {
let imageList = []
if (this.props.project.project) {
const { project, waiting } = this.props.project
for (let [i, img] of project.images.entries()) {
if (!img.isDeleted) {
let options = ['-', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
this.props.positions[i] = img.gridPosition
let imgSrc = `/public/${project._id}/${img.originalName}`
imageList.push(
<tr
key={img._id}
style={waiting ? { opacity: '.5' } : { opacity: '1' }}
>
<td>
<img src={imgSrc} alt="" style={{ width: '60px' }} />
</td>
<SelectFieldGroup
name={`placeInGrid_${i}`}
onChange={this.updatePosition.bind(
this,
project._id,
project.name,
img._id,
img.originalName,
i
)}
options={options}
value={this.props.positions[i]}
/>
</td>
</tr>
)
}
}
}
return imageList
}
render() {
return (
<div className={styles['image-list']}>
<table className={styles['image-table']}>
<tbody>{this.getAllImages()}</tbody>
</table>
</div>
)
}
}
const mapStateToProps = state => ({
auth: state.auth,
project: state.project
})
export default connect(
mapStateToProps,
{ deleteImage, setGridPosition }
)(ImageList)
I receive the props - the project and positions (as an empty array) - from the parent Component.
I hope the issue is somehow clear. I would really appreciate any help or pointers to where I went wrong.
Edit:
As requested, for clarification, here are some other parts of the code:
SelectFieldGroup.js:
import React from 'react'
import PropTypes from 'prop-types'
import cx from 'classnames'
import globalStyles from './Bootstrap.module.css'
import commonStyles from './Common.module.sass'
const SelectFieldGroup = ({ name, onChange, options, value, disabled }) => {
let optionArray = []
for (let [index, option] of options.entries()) {
optionArray.push(<option key={index}>{option}</option>)
}
return (
<div className={globalStyles['form-group']}>
<select
value={value}
className={cx(
globalStyles['custom-select'],
commonStyles['custom-select'],
commonStyles['dark-input']
)}
name={name}
onChange={onChange}
disabled={disabled}
>
{optionArray}
</select>
</div>
)
}
SelectFieldGroup.propTypes = {
name: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
disabled: PropTypes.string
}
export default SelectFieldGroup
The relevant part of imageActions.:
export const setGridPosition = (
projectId,
projectName,
imageId,
imageName,
position
) => dispatch => {
dispatch(setWaiting())
const data = {
projectId: projectId,
projectName: projectName,
imageId: imageId,
imageName: imageName,
position: position
}
console.log(projectId)
axios
.post('/api/projects/set_grid_position', data)
.then(res => {
console.log(res.data)
dispatch({
type: SET_GRID_POSITION,
payload: res.data
})
})
.catch(err =>
dispatch({
type: GET_ERRORS,
payload: {}
})
)
}
The node express api:
router.post(
'/set_grid_position',
passport.authenticate('jwt', { session: false }),
(req, res) => {
const errors = {}
Project.findById(req.body.projectId).then(currentProject => {
let updatedProject = currentProject
ProjectGridPosition.findOne({ position: req.body.position }).then(
gridPosition => {
if (req.body.position != '-') {
// Mark the previous position of the image as empty.
ProjectGridPosition.findOne({ imageId: req.body.imageId })
.then(oldPos => {
oldPos.isTaken = false
oldPos.save()
})
.catch(err => res.status(400).json(err))
// Set the gridPosition inside the image.
currentProject.images.forEach(img => {
if (img._id == req.body.imageId) {
img.gridPosition = req.body.position
}
})
currentProject.save(err => {
if (err) res.json(err)
else {
updatedProject = currentProject
}
})
if (gridPosition) {
if (gridPosition.projectId) {
Project.findById(gridPosition.projectId)
.then(project => {
console.log(project.name)
project.images.forEach(img => {
if (img.gridPosition == req.body.position) {
console.log(img.originalName)
img.gridPosition = '-'
}
})
project.save(err => {
if (err) {
res.json(err)
} else {
if (project == currentProject) {
updatedProject = currentProject
}
}
})
})
.catch(err => res.json(err))
}
gridPosition.projectId = req.body.projectId
gridPosition.projectName = req.body.projectName
gridPosition.imageId = req.body.imageId
gridPosition.imageName = req.body.imageName
gridPosition.isTaken = true
gridPosition.save()
res.json(updatedProject)
} else {
const newPosFields = {
projectId: req.body.projectId,
projectName: req.body.projectName,
imageId: req.body.imageId,
imageName: req.body.imageName,
position: req.body.position,
isTaken: true
}
new ProjectGridPosition(newPosFields)
.save()
.then(() => {
currentProject.save().then(() => {
res.json(currentProject)
})
})
.catch(err => res.json(err))
}
} else {
currentProject.images.forEach(img => {
if (img._id == req.body.imageId) {
img.gridPosition = req.body.position
}
})
currentProject.save(err => {
if (err) res.json(err)
ProjectGridPosition.findOne({ imageId: req.body.imageId }).then(
newPos => {
newPos.isTaken = false
newPos.save().then(() => {
currentProject.save().then(() => {
res.json(currentProject)
})
})
}
)
})
}
}
)
})
}
)
And finally, the relevant part of projectReducer.js:
import {
// ...
SET_GRID_POSITION
} from '../actions/types'
const initialState = {
project: null,
projects: null,
loading: false,
waiting: false
}
export default function(state = initialState, action) {
switch (action.type) {
// ....
case SET_GRID_POSITION:
return {
...state,
project: action.payload,
waiting: false
}
default:
return state
}
}
So I managed to make it work by restructuring and getting rid of the ProjectGridPosition model completely. Doing so makes the whole process a lot simpler. I then completely rewrote the route:
router.post(
'/set_grid_position',
passport.authenticate('jwt', { session: false }),
async (req, res) => {
let project = await getProjectById(req.body.projectId)
const query = {
'images.gridPosition': req.body.position
}
let formerRankProject = await getProjectByQuery(query)
project = await updateRank(project, req.body.imageId, req.body.position)
if (formerRankProject !== null) {
formerRankProject = await UpdateIfDifferentProject(
formerRankProject,
project._id,
req.body
)
formerRankProject.save()
}
project
.save()
.then(project => res.json(project))
.catch(err => res.json(err))
}
)
Now it's working. I don't exactly know what the problem was, but as #Tex pointed out in the comments, I had a LOT of levels of nesting - so something probably was bound to go wrong.
I will mark this as the correct answer - even though it's more of a work around - so people know, I'm not still looking for help.
i am learning redux here. I got problems when i submit my input. I have 2 text input and i want to store it in an array, but when i got the error. it seems like the app adding a new one undefined data, so i can't load the property of undefined. But when i used one params in actions, It works, i don't know why. It is first time i am using redux, i hope you can help me, thank you
actions.js
import { ADD_PERSON, DEL_PERSON} from '../constants';
export const addPerson = (person, age) => {
return {
type: ADD_PERSON,
person,
age
}
}
export const delPerson = (person, age) => {
return {
type: DEL_PERSON,
person,
age
}
}
my reducers
import { ADD_PERSON, DEL_PERSON} from '../constants';
const initState = {people: [{ name: 'Wahyu', age: '18' }]}
export default function peopleReducer(state = initState, action){
switch (action.type) {
case ADD_PERSON:
return {
people: [
...state.people,
action.person,
action.age,
],
};
case DEL_PERSON:
return {
people: state.people.filter(p => p.name !== action.person.name),
};
default:
return state;
}
}
components file
state = {
name: '',
age: '',
}
addPerson = () => {
if (this.state.name === '') return;
this.props.dispatchAddPerson({
name: this.state.name,
age: this.state.age,
});
}
deletePerson = (person) => {
this.props.dispatchdeletePerson(person)
}
render() {
console.log(this.props.people)
return (
<View>
<Text style={styles.title}>People</Text>
<TextInput
onChangeText={(name) => this.setState({name})}
style={styles.input}
value={this.state.name}
placeholder="Name"
/>
<TextInput
onChangeText={(age) => this.setState({age})}
style={styles.input}
value={this.state.age}
placeholder="Age"
/>
<TouchableHighlight
underlayColor="#ffa012"
style={styles.button}
onPress={this.addPerson}
>
<Text style={styles.buttonText}>Add Person</Text>
</TouchableHighlight>
{
this.props.people.map((person, index) => (
<View key={index} style={styles.person}>
<Text>Name: {person.name}</Text>
<Text>Age: {person.age} </Text>
<Text onPress={() => this.deletePerson(person)}>Delete Person</Text>
</View>
))
}
</View>
)
}
}
function mapStateToProps(state) {
return{
people: state.people.people
}
}
function mapDispatchToProps (dispatch) {
return {
dispatchAddPerson: (person,age) => dispatch(addPerson(person,age)),
dispatchdeletePerson: (person) => dispatch(delPerson(person))
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App)
This line is incorrect in your reducer
case ADD_PERSON
return {
people: [
...state.people,
action.person,
action.age, <---this is wrong
],
};
shouldhave been
case ADD_PERSON
return {
people: [
...state.people,
action.person
],
};
The action could be like:
export const addPerson = (person, age) => {
return {
type: ADD_PERSON,
Object.assign({}, person , {age}),
}
}
I have a directory which stores images taken using the camera. For saving images I am using RNFS. I am using react-native-photo-browser.
The gallery itself doesn't have any options to delete the items from the gallery. So I am working to achieve it
export default class GridGallery extends React.Component{
static navigationOptions = {
title: 'Image Gallery',
};
constructor(props) {
super(props)
this.state = {
filesList : [],
mediaSelected: [],
base64URI: null,
galleryList: []
}
}
componentDidMount(){
FileList.list((files) => {
if(files != null) {
this.fileUrl = files[0].path;
files = files.sort((a, b) => {
if (a.ctime < b.ctime)
return 1;
if (a.ctime > b.ctime)
return -1;
return 0;
});
this.setState({
filesList: files
});
}
console.warn(this.state.filesList);
this.getFiles();
});
}
getFiles(){
//console.warn(this.state.filesList);
const ArrFiles = this.state.filesList.map((file) =>
({ caption : file.name, photo : file.path })
);
//console.warn(ArrFiles);
this.setState({ galleryList : ArrFiles });
}
onActionButton = (media, index) => {
if (Platform.OS === 'ios') {
ActionSheetIOS.showShareActionSheetWithOptions(
{
url: media.photo,
message: media.caption,
},
() => {},
() => {},
);
} else {
alert(`handle sharing on android for ${media.photo}, index: ${index}`);
}
};
handleSelection = async (media, index, isSelected) => {
if (isSelected == true) {
this.state.mediaSelected.push(media.photo);
} else {
this.state.mediaSelected.splice(this.state.mediaSelected.indexOf(media.photo), 1);
}
console.warn(this.state.mediaSelected);
}
deleteImageFile = () => {
const dirPicutures = RNFS.DocumentDirectoryPath;
//delete mulitple files
console.warn(this.state.mediaSelected);
this.state.mediaSelected.map((file) =>
// filepath = `${dirPicutures}/${file}`
RNFS.exists(`${file}`)
.then( (result) => {
console.warn("file exists: ", result);
if(result){
return RNFS.unlink(`${file}`)
.then(() => {
console.warn('FILE DELETED');
let tempgalleryList = this.state.galleryList.filter(item => item.photo !== file);
this.setState({ galleryList : tempgalleryList })
})
// `unlink` will throw an error, if the item to unlink does not exist
.catch((err) => {
console.warn(err.message);
});
}
})
.catch((err) => {
console.warn(err.message);
})
)
}
renderDelete(){
const { galleryList } = this.state;
if(galleryList.length>0){
return(
<View style={styles.topRightContainer}>
<TouchableOpacity style={{alignItems: 'center',right: 10}} onPress={this.deleteImageFile}>
<Image
style={{width: 24, height: 24}}
source={require('../assets/images/ic_delete.png')}
/>
</TouchableOpacity>
</View>
)
}
}
goBack() {
const { navigation } = this.props;
navigation.pop;
}
render() {
const { galleryList } = this.state;
return (
<View style={styles.container}>
<View style={{flex: 1}}>
<PhotoBrowser
mediaList={galleryList}
enableGrid={true}
displayNavArrows={true}
displaySelectionButtons={true}
displayActionButton={true}
onActionButton={this.onActionButton}
displayTopBar = {true}
onSelectionChanged={this.handleSelection}
startOnGrid={true}
initialIndex={0}
/>
</View>
{this.renderDelete()}
</View>
)
}
}
An example list of images:
[
{
photo:'4072710001_f36316ddc7_b.jpg',
caption: 'Grotto of the Madonna',
},
{
photo: /media/broadchurch_thumbnail.png,
caption: 'Broadchurch Scene',
},
{
photo:
'4052876281_6e068ac860_b.jpg',
caption: 'Beautiful Eyes',
},
]
My aim is whenever the item from state galleryList is removed I need to refresh the component, so the deleted image will be removed from the gallery. So When I try to use filter the galleryList it deleting other images instead of other images:
let tempgalleryList = this.state.galleryList.filter(item => item.photo !== file);
this.setState({ galleryList : tempgalleryList })
MCVE -> This is a minified version of my code, you can see the images are deleting randomly
Problem
let tempgalleryList = this.state.galleryList.filter(item => item.photo !== file);
this.setState({ galleryList : tempgalleryList })
Since setState is async, this.state.galleryList will not be updated in each iteration of your map function, so the final updated state will only have one item filtered out instead of all selected items.
Solution
You can use the callback version of setState which uses the updated state instead:
this.setState(prevState => ({
galleryList : prevState.galleryList.filter(item => item.photo !== file),
}));
Alternative solution
Instead of calling setState in every iteration, you can call it outside of your map function instead (though setState updates will be batched anyway so no significant performance improvement):
this.setState(prevState => ({
galleryList : prevState.galleryList.filter(item => !prevState.mediaSelected.includes(item.photo)),
}));
Other problems with your code
this.state.mediaSelected.push(media.photo);
} else {
this.state.mediaSelected.splice(this.state.mediaSelected.indexOf(media.photo), 1);
You are directly mutating your state here. Do this instead:
this.setState(prevState => ({
mediaSelected: prevState.mediaSelected.concat(media.photo)
}));
this.setState(prevState => ({
mediaSelected: prevState.mediaSelected.filter(e => e != media.photo)
}));