We Keep Coding

React todo app, problem with removing task

I'm working on todo app in React and I have weird problem. I created onClick effect on trash icon to remove whole task component. The thing is, sometimes it works (removes whole task), sometimes not (removes only icon). I tried different solutions but to be honest I have no idea why it works like this, this is the same script working differently in different components, for some reason.
main component:
import React from 'react'
import TaskContainer from './TaskContainer.js';
import SingleTask from './SingleTask'
class AppContainer extends React.Component {
constructor(props) {
super(props)
this.state = {
children: [],
numChildren: 0,
newMessage: "What to do next?"
}
this.onAddChild = this.onAddChild.bind(this)
this.handleChange = this.handleChange.bind(this)
}
onAddChild = (msg) => {
let newArray = this.state.children.concat(<SingleTask message={msg} />);
this.setState({ children: newArray });
console.log(this.state.children)
}
handleChange(event) {
this.setState({ newMessage: event.target.value })
}
render() {
return (
<div className="app-container">
<div className="new-task-container">
<input type="text" id="taskInput" defaultValue="What to do next?"
maxlength="50" onChange={this.handleChange} />
<div className="addTask" id="addTask" onClick={
() => {
let text = document.getElementById("taskInput").value;
this.setState({ newMessage: text })
this.onAddChild(this.state.newMessage);
}
}>
<div className="add-button">Add task</div>
</div>
</div>
<TaskContainer>
{this.state.children}
</TaskContainer>
</div>
)
}
}
export default AppContainer
child component
import SingleTask from './SingleTask.js';
function TaskContainer(props) {
return (
<div className="task-container">
{props.children}
</div>
)
}
export default TaskContainer
child's child component - SingleTask
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faTrashAlt } from '#fortawesome/free-regular-svg-icons'
class SingleTask extends React.Component {
constructor(props) {
super(props)
this.state = { active: true }
}
render() {
return (
<div className="singleTask" >
<p>{this.props.message}</p>
<div className="removeTask" onClick={(event) => {
setTimeout(() => {
event.target.parentNode.parentNode.remove()
}, 350)
}
}>
<FontAwesomeIcon icon={faTrashAlt} />
</div>
</div>
)
}
}
export default SingleTask
thanks in advance

I create a CodeSandbox with all the necessary corrections.
https://codesandbox.io/s/upbeat-jang-v7jvm
Piece of advice: When using React is not recommend that you modify the DOM by yourself.

Having some problem on using map() method on my react application

In my app i have an initial state in a component App.js it's an array of objects
Here is App.js code:
import React, { Component } from 'react';
import './App.css';
import { render } from '#testing-library/react';
// Import Used Components
import SearchBar from '../SearchBar/SearchBar';
import Playlist from '../PlayList/PlayList';
import SearchResults from '../SearchResults/SearchResults';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchResults: [{name: 'name1',artist: 'artist1',album: 'album1',id: 1},
{name: 'name2',artist: 'artist2',album: 'album2',id: 2}]
};
}
// Adding JSX to App Component
render() {
return (
<div>
<h1>Ja<span className="highlight">mmm</span>ing</h1>
<div className="App">
<SearchBar />
<div className="App-playlist">
<SearchResults searchResults={this.state.searchResults} />
<Playlist />
</div>
</div>
</div>
);
}
}
export default App;
I passed this initial state as a prop called searchResults to another component named .
Here is searchResults.js code :
import './SearchResults.css';
import TrackList from '../TrackList/TrackList';
class SearchResults extends React.Component {
render() {
return (
<div className="SearchResults">
<h2>Results</h2>
<TrackList tracks={this.props.searchResults}/>
</div>
);
}
}
export default SearchResults;
then I used passed this prop to another component called TrackList
here is TrackList.js code:
import React from 'react';
import './TrackList.css';
import Track from '../Track/Track';
class TrackList extends React.Component {
render() {
return(
<div className="TrackList">
{
this.props.tracks.map(track => {
return <Track track={track} key={track.id} />;
} )
}
</div>
);
}
}
export default TrackList;
In Track.js I want to map through this initial state array to render a component called Track
here is the Track.js code:
import React from 'react';
import './Track.css';
class Track extends React.Component {
renderAction() {
if (this.props.isRemoval){
return <botton className='Track-action'>-</botton>;
} else {
return <botton className='Track-action'>+</botton>;
}
};
render() {
return (
<div className="Track">
<div className="Track-information">
<h3>{this.props.track.name}</h3>
<p>{this.props.track.artist} | {this.props.track.album}</p>
</div>
<button className="Track-action">{this.renderAction}</button>
</div>
);
}
}
export default Track;
But something is wrong !! I keep getting this error:
TypeError: Cannot read property 'map' of undefined
Here is searchBar.js component code:
import React from 'react';
import './SearchBar.css';
class SearchBar extends React.Component {
render() {
return (
<div className="SearchBar">
<input placeholder="Enter A Song, Album, or Artist" />
<button className="SearchButton">SEARCH</button>
</div>
);
}
}
export default SearchBar;
HERE LINK TO THE PROJECT WITH THE SAME ERROR ON SANDBOX
https://codesandbox.io/s/upbeat-dawn-lwbxb?fontsize=14&hidenavigation=1&theme=dark

Change your TrackList component to this:
class TrackList extends React.Component {
render() {
return (
<div className="TrackList">
{this.props.tracks && this.props.tracks.map(track => {
return <Track key={track.id} track={track}/>
})}
</div>
);
}
}
You can't map through this.props.tracks if it is undefined.
The && (AND operator) is a concise way to conditionally render in React. You can think of it like a simple if statement: If the expression on the left is true, then do x.
I'll also expand on why the this.props.tracks was undefined in a certain instance in your case.
The reason that this problem is happening is your Playlist component. If you uncomment this component from your App you will notice your original code will work.
This is because your PlayList component, like your SearchResults component, also renders your TrackList component. The problem is you haven't passed your state and props down to TrackList like you did with your SearchResults component.
So an alternative solution would be to pass your state and props down from PlayList to TrackList:
App.js
// ...
<SearchResults searchResults={this.state.searchResults} />
<Playlist searchResults={this.state.searchResults}/>
// ...
PlayList.js
// ...
<TrackList tracks={this.props.searchResults}/>
// ...

How do I add router links in reactjs

I was following a tutorial where you could take the star wars api and fetch data from the api to show on the website. In the tutorial, they basically show you to make a button and when you click the button, it shows the character info. But I want it to go to another page showing the details of the character using react router. Below is the code
import axios from 'axios';
import './App.css';
import List from './List';
class App extends Component {
constructor(props){
super(props);
this.state={
people: [],
}
this.getPeople=this.getPeople.bind(this);
}
getPeople(){
return axios.get("https://swapi.co/api/people")
.then((response)=>{
console.log(response.data.results);
this.setState({people: response.data.results})
})
}
componentDidMount(){
this.getPeople()
}
render(){
const {people}=this.state;
return (
<div className="App">
<List people={people}/>
</div>
);
}
}
export default App;
List.js
import React, {Component} from 'react';
import CharInfo from './CharInfo';
class List extends Component{
render(){
const people=this.props.people;
return (
<div className="">
{
people.map((p)=>{
console.log(p)
return (
<div key={p.url}>
<h1 className="char-name">{p.name}</h1>
<CharInfo charInfo={p}/>
</div>
)
})
}
</div>
);
}
}
export default List;
CharInfo.js
import React, {Component} from 'react';
class CharInfo extends Component{
constructor(props){
super(props);
this.state={
expanded: false,
}
this.open=this.open.bind(this);
this.close=this.open.bind(this);
}
open(){
this.setState({expanded: !this.state.expanded})
}
close(){
this.setState({expanded: !this.state.expanded})
}
render(){
const info=this.props.charInfo;
if(!this.state.expanded){
return <p className="btn btn-info" onClick={this.open}>Show info</p>
}
return (
<div className="user-details">
<p className="btn btn-danger" onClick={this.close}>Hide Info</p>
<ul>
<li>
<h2>Gender: {info.gender}</h2>
</li>
<li>
<h2>Birth Year: {info.birth_year}</h2>
<li><h2>Hair Color: {info.hair_color}</h2></li>
</li>
</ul>
</div>
)
}
}
export default CharInfo;
in this link, you could see the code in a codesandbox
https://codesandbox.io/s/romantic-pine-lmhvn

You need to integrate the react-router-dom library in order to navigate to different "pages" in your React application.
Working codesandbox: https://codesandbox.io/s/star-wars-api-8bbuf
App.js
import React, { Component } from "react";
import axios from "axios";
import List from "./List";
import Character from "./Character";
import { BrowserRouter, Route } from "react-router-dom";
class App extends Component {
constructor(props) {
super(props);
this.state = {
people: []
};
this.getPeople = this.getPeople.bind(this);
}
getPeople = () => {
axios.get("https://swapi.co/api/people").then(response => {
this.setState({ people: response.data.results });
});
};
componentWillMount() {
this.getPeople();
}
render() {
const { people } = this.state;
console.log(people);
return (
<BrowserRouter>
<Route
path="/"
exact
render={props => <List {...props} people={this.state.people} />}
/>
<Route
path="/char/:charName"
render={props => {
const { charName } = props.match.params;
const foundCharacter = this.state.people.find(
person => person.name.split(" ").join("") == charName
);
return <Character {...props} info={foundCharacter} />;
}}
/>
</BrowserRouter>
);
}
}
export default App;
CharInfo.js
import React, { Component } from "react";
import { Link } from "react-router-dom";
class CharInfo extends Component {
constructor(props) {
super(props);
this.state = {
expanded: false
};
this.open = this.open.bind(this);
this.close = this.open.bind(this);
}
open() {
this.setState({ expanded: !this.state.expanded });
}
close() {
this.setState({ expanded: !this.state.expanded });
}
render() {
const info = this.props.charInfo.name.split(" ").join("");
return (
<div className="user-details">
<Link className="btn btn-info" to={`/char/${info}`}>
Show info
</Link>
</div>
);
}
}
export default CharInfo;
New component: Character.js
const Character = ({ info }) => {
return (
<div>
{
<ul>
<li>
<h2>{info.name}</h2>
</li>
<li>
<h2>Gender: {info.gender}</h2>
</li>
<li>
<h2>Birth Year: {info.birth_year}</h2>
</li>
<li>
<h2>Hair Color: {info.hair_color}</h2>
</li>
{info.vehicles.length > 0 && (
<li>
<h2>Vehicles:</h2>
<ul>
{info.vehicles.map((vehicle, index) => (
<li key={index}>{vehicle}</li>
))}
</ul>
</li>
)}
</ul>
}
</div>
);
};
export default Character;

Cannot access URL path components with react-router

I'm doing this in App.js:
<Route path="/discover/:query" component={Discover}/>
Then I'm trying to access the URL parameters in Discover:
componentDidMount() {
alert(this.props.match); // undefined
}
I've tried many other ways, like: alert(this.match); or alert(match);. They are all undefined!
What am I doing wrong? I'm following the docs as far as I can tell.
I'm running React version 16.3.2.
EDIT:
All of App.js:
import React, { Component } from 'react';
import './styles/app.css';
import { Route } from 'react-router-dom';
import Welcome from './welcome';
import Discover from './discover';
import MySearches from './my-searches';
import Login from './login';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// import Database from './database';
class App extends Component {
constructor(props) {
super(props)
this.state = {
title: '',
}
}
render() {
return (
<div className="App">
<header className="App-header">
{/* <Route path="/" component={Login}/> */}
<Route exact path="/" component={Welcome}/>
<Route path="/discover/:query" component={Discover}/>
<Route path="/my-searches" component={MySearches}/>
{/* <Route path="/database" component={Database}/> */}
</header>
</div>
);
}
}
export default App;
All of discover.js:
import React from 'react';
import Map from './map';
import Search from './search';
import SentimentContainer from './sentiment';
import { Steps } from 'intro.js-react';
import ButtonImportant from '../components/button-important';
import { modelInstance } from '../model/model';
import DrawingAnimation from '../components/intro-drawing-animation'
import 'intro.js/introjs.css';
import '../styles/discover.css';
import '../styles/search.css';
class DiscoverContainer extends React.Component {
constructor(props){
super(props);
this.state = {
status: 'INITIAL',
//Intro.js
initialStep: 0,
introState: 'INITIAL',
steps: [
{
element: '.sentiment-pie',
intro: "This app shows people's sentiment towards subjects based on tweets.</br> <h5><ButtonImportant><a target='_blank' href='https://en.wikipedia.org/wiki/Sentiment_analysis'>What is Sentiment Analysis?</a></ButtonImportant></h5> ",
},
{
element: '#searchInput',
intro: 'You can search for subjects here',
},
{
element: '.date',
intro: 'You can look for tweets in the past 7 days',
},
{
element: '.location',
intro: 'Type in place names or interact with the map to look for tweets in specific locations',
},
{
element: '.sentiment-tweet',
intro: 'The tweets will be displayed here',
},
{
element: '.createPDF',
intro: 'Finally you can export the data in a PDF',
},
],
}
}
componentDidMount() {
console.log("props:");
console.log(this.props.locationl); // undefined
}
handleStatusChange = newStatus => {
this.setState({
status: newStatus
});
}
onExit = () => {
this.setState(() => ({
stepsEnabled: false,
introState: 'INITIAL'
}));
};
toggleSteps = () => {
this.setState(prevState => ({ stepsEnabled: !prevState.stepsEnabled }));
// this.onAfterChange(prevState);
};
onAfterChange = nextStepIndex => {
if (nextStepIndex === 0 && this.state.status !=='LOADED') {
this.setState({
status: 'LOADED'
})
// this.step.updateStepElement(nextStepIndex);
}
else if (nextStepIndex === 3) {
this.setState({
introState: 'MAP'
})
// this.step.updateStepElement(nextStepIndex);
}
else{
this.setState({
introState: 'INITIAL'
})
}
}
render () {
const { stepsEnabled, steps, initialStep} = this.state;
let media = null;
switch (this.state.introState) {
case 'INITIAL':
media = null
break;
case 'MAP':
media = <DrawingAnimation />
break;
}
return (
<div className="container-discover">
<Steps
className='intro-steps'
enabled={stepsEnabled}
steps={steps}
initialStep={initialStep}
onExit={this.onExit}
onAfterChange={this.onAfterChange}
/>
<div className="container-discover-top">
<div className='map'>
<Map/>
</div>
<div className="intro">
{media}
<ButtonImportant size="small" text='Explain App' toggleSteps={this.toggleSteps.bind(this)}/>
</div>
<div className='container-search'>
<Search handleStatusChange={this.handleStatusChange}/>
</div>
</div>
<div className="container-discover-bottom">
<SentimentContainer status={this.state.status}/>
</div>
</div>
);
}
}
export default DiscoverContainer;

You need to use the withRouter HOC to access the match props:
export default withRouter(DiscoverContainer);
...
console.log(this.props.match);

Redux - the app does not re-render after dispatching

I'm new to react + redux. I encountered a problem which my app is not re-render when I dispatch an action. However, I use getState() to examine the state, it did change. I look up documents but still have no idea what the problem is. Please help me, thanks.
The code is as below
====actions.js====
export const ADD_MAIL = 'ADD_MAIL';
export const DEL_MAIL = 'DEL_MAIL';
export function addMail(email) {
return {
type: ADD_MAIL,
email
}
}
export function delMail(id) {
return {
type: DEL_MAIL,
id
}
}
====reducers.js====
import { combineReducers } from 'redux'
import { ADD_MAIL, DEL_MAIL } from '../actions/actions'
import MAILS from '../data'
function emails(state = MAILS, action) {
switch (action.type) {
case ADD_MAIL:
console.log("ADD_MAIL");
return [
action.email,
...state
];
case DEL_MAIL:
let idx = state.length;
let i = 0;
// Find the target mail
while(idx--) {
if (state[idx] && state[idx].serialNo === action.id)
i = idx;
}
let arr1 = state.slice(0, i);
let arr2 = state.slice(i + 1);
let newList = arr1.concat(arr2);
console.log("DEL_MAIL");
return newList;
default:
return state;
}
}
const rootReducer = combineReducers({
emails
});
export default rootReducer;
====main.js====
import React from 'react'
import { render } from 'react-dom'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import { createStore } from 'redux'
import { addMail, delMail } from './actions/actions'
import rootReducer from './reducers/reducers'
import * as btn from './module/button'
import * as module from './module/module'
var store = createStore(rootReducer);
class Inbox extends React.Component {
constructor(props) {
super(props);
this.state = {
searchText: ''
}
this.handleUserInput = this.handleUserInput.bind(this);
this.deleteMail = this.deleteMail.bind(this);
this.sendMail = this.sendMail.bind(this);
}
handleUserInput(searchText) {
this.setState({
searchText: searchText
});
}
deleteMail(obj) {
store.dispatch(delMail(obj.serialNo));
console.log(store.getState());
// This displays the correct new state in console after dispatch
}
sendMail(newMail) {
store.dispatch(addMail(newMail));
console.log(store.getState());
// This displays the correct new state in console after dispatch
}
render() {
let mails = [];
let search = this.state.searchText.toUpperCase();
let emails = this.props.emails;
emails.map(mail => {
if (mail.from.toUpperCase().indexOf(search) !== -1)
mails.push(mail);
});
let sender = (mails.length === emails.length) ? "all" : this.state.searchText;
return (
<div className="main">
<div className="toolbar">
<span>You have {mails.length} message from {sender}.</span>
<module.SearchInput searchText={this.state.searchText} onUserInput={this.handleUserInput} />
<div className="functions">
<btn.AddButton />
</div>
</div>
<div className="mailList">
{mails.map(mail => (
<div className="item" key={mail.serialNo}>
<div className="info sender">
From: {mail.from}
</div>
<div className="info date">
{mail.date}
</div>
<div className="info subject">
Subject: {mail.subject}
</div>
<div className="functions">
<btn.ReadButton serialNo={mail.serialNo} />
<btn.DeleteButton serialNo={mail.serialNo} deleteMail={this.deleteMail} />
</div>
</div>
))}
</div>
<module.NewMailInput sendMail={this.sendMail} />
</div>
);
}
}
function mapStateToProps(state) {
return {
emails: state.emails
};
}
export default connect(mapStateToProps)(Inbox);
====app.js====
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { Menu } from './menu'
import { Mail } from './main'
import Inbox from './main'
import rootReducer from './reducers/reducers'
var store = createStore(rootReducer);
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div style={{height: '100%'}}>
<Menu />
{this.props.children}
</div>
);
}
}
class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Inbox />
);
}
}
render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home} />
<Route path="/inbox" component={Inbox} />
<Route path="/message/:mailSerial" component={Mail} />
</Route>
</Router>
</Provider>,
document.getElementById('app-container'))

Try this:
import React from 'react'
import { render } from 'react-dom'
import { Link } from 'react-router'
import { connect } from 'react-redux'
import { addMail, delMail } from './actions/actions'
import * as btn from './module/button'
import * as module from './module/module'
class Inbox extends React.Component {
constructor(props) {
super(props);
this.state = {
searchText: ''
}
this.handleUserInput = this.handleUserInput.bind(this);
this.deleteMail = this.deleteMail.bind(this);
this.sendMail = this.sendMail.bind(this);
}
handleUserInput(searchText) {
this.setState({
searchText: searchText
});
}
deleteMail(obj) {
this.props.delMail(obj.serialNo); //Call the delMail action
console.log(store.getState());
}
sendMail(newMail) {
this.props.addMail(newMail); //Call the addMail action
console.log(store.getState());
}
render() {
let mails = [];
let search = this.state.searchText.toUpperCase();
let emails = this.props.emails;
emails.map(mail => {
if (mail.from.toUpperCase().indexOf(search) !== -1)
mails.push(mail);
});
let sender = (mails.length === emails.length) ? "all" : this.state.searchText;
return (
<div className="main">
<div className="toolbar">
<span>You have {mails.length} message from {sender}.</span>
<module.SearchInput searchText={this.state.searchText} onUserInput={this.handleUserInput} />
<div className="functions">
<btn.AddButton />
</div>
</div>
<div className="mailList">
{
mails.map(mail => (
<div className="item" key={mail.serialNo}>
<div className="info sender">From: {mail.from}</div>
<div className="info date">{mail.date}</div>
<div className="info subject">Subject: {mail.subject}</div>
<div className="functions">
<btn.ReadButton serialNo={mail.serialNo} />
<btn.DeleteButton serialNo={mail.serialNo} deleteMail={this.deleteMail} />
</div>
</div>
))
}
</div>
<module.NewMailInput sendMail={this.sendMail} />
</div>
);
}
}
function mapStateToProps(state) {
return {
emails: state.emails
};
}
//Connect the component to re-render when state change and
// makes the emails and actions to be available through this.props
export default connect(mapStateToProps, {delMail, addMail})(Inbox);
//To connect Mail component which I suppose that is in another file
function mapStateToProps(state) {
return { emails: state.emails };
}
export default connect(mapStateToProps, {})(Mail);

In your main.js file, you have made a Inbox component. That is a React Component but not a Redux Component.
You have to do something like this while exporting Inbox component.
module.exports = connect((store)=> {
return {emails: store.emails}
})(Inbox)

You have 2x stores: one in main.js and one in app.js. Remove the one in main.js and update the calls to dispatch to use the one passed as props:
class Inbox extends React.Component {
...
deleteMail(obj) {
this.props.dispatch(delMail(obj.serialNo));
}
...
}