This.props.onSave is not a function- Uncaught typescript error

Asked
Active3 hr before
Viewed126 times

8 Answers

propsuncaughttypescripterrorfunction
90%

Unhandled Rejection (TypeError): _this.props.onSave is not a function,I have a form and when someone saves it I want it to display it in a blog format on my first page. I am getting an error when I click on the "Save" button. The error is:,Thanks for contributing an answer to Stack Overflow!

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Hi! I’m having a bit of an issue completing the Jammming project within the WebDev course (https://bit.ly/2TBz9xz), I’m about halfway through and I am getting the following error:,I may very well be missing things because idk react, so you know better than me where it’s supposed to come from. Follow it.,instead of using an if/else and putting the attribute in the else.

Hi! I’m having a bit of an issue completing the Jammming project within the WebDev course (https://bit.ly/2TBz9xz), I’m about halfway through and I am getting the following error:

** TypeError: this.props.onAdd is not a
function **
addTrack() {
   var track = this.props.track;
   this.props.onAdd(track);
};
1. addTrack() defined in <App /> and bound using this.addTrack = this.addTrack.bind(this);
2. passed to SearchResults via <SearchResults onAdd={this.addTrack} />
3. passed to Tracklist via <Tracklist onAdd={this.props.onAdd} />
4. passed to Track via <Track onAdd={this.props.onAdd} />
5. passed to a button via <button onClick={this.addTrack} />
addTrack(track) {
   var tracks = this.state.playlistTracks;
   if (tracks.find(savedTrack => savedTrack.id === track.id)) {
      return;
   }
   tracks.push(track);
   this.setState({
      playlistTracks: tracks
   })
};
import React from 'react';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';
import './App.css';

class App extends React.Component{
  constructor(props){
    super(props);
     
      this.state = {
      playlistName: "Playlist 01",
      playlistTracks:[{
        name: "Track99",
        artist: "TrackArtist99",
        album: "TrackAlbum99",
        id: "T99",
      },],
      searchResults: [{
        name: "Track01",
        artist: "TrackArtist01",
        album: "TrackAlbum01",
        id: "T01",
      },{
        name: "Track02",
        artist: "TrackArtist02",
        album: "TrackAlbum02",
        id: "T02",
      },{
        name: "Track03",
        artist: "TrackArtist03",
        album: "TrackAlbum03",
        id: "T03",
      },{
        name: "Track04",
        artist: "TrackArtist04",
        album: "TrackAlbum04",
        id: "T04",
      },]
    };

    this.addTrack = this.addTrack.bind(this);
  };

  addTrack(track){
  var tracks = this.state.playlistTracks;
  if (tracks.find(savedTrack => savedTrack.id === track.id)){
    return;
  }
  tracks.push(track);
  this.setState({
    playlistTracks: tracks
  })
  };

  render(){
    return (
            <div>
  <h1>Ja<span className="highlight">mmm</span>ing</h1>
  <div className="App">
    <SearchBar />
    <div className="App-playlist">
     <SearchResults onAdd={this.addTrack} searchResults={this.state.searchResults}/>
     <Playlist playlistName={this.state.playlistName} playlistTracks={this.state.playlistTracks}/>
  
    </div>
  </div>
</div>
      );
  }
};

export default App;
import React from 'react';
import Tracklist from '../Tracklist/Tracklist';
import './SearchResults.css';

class SearchResults extends React.Component{
	constructor(props){
		super(props);
	}
	render(){
		return(
			<div className="SearchResults">
  			<h2>Results</h2>

  			<Tracklist isRemoval={false} onAdd={this.props.onAdd} tracks={this.props.searchResults} />
			</div>
			);
	}
};

export default SearchResults;
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 onAdd={this.props.onAdd} track={track} key={track.id} />
				})
			}
			</div>
		);
	}
};

export default Tracklist;

import React from 'react';
import './Track.css';
import { PropTypes } from 'react'
class Track extends React.Component{
	constructor(props){
		super(props);
		this.addTrack = this.addTrack.bind(this);
		this.renderAction = this.renderAction.bind(this);	
	}
	
	renderAction(){

		var buttonContent = '';
			if(this.props.isRemoval){
				buttonContent = "-";
			} else {
				buttonContent = "+";
			};
		return(
			<button className="Track-action" onClick={this.addTrack}>{buttonContent}</button>
			);
	};

	addTrack(){
		var track = this.props.track;
		this.props.onAdd(track);
	};
	
	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>
				{this.renderAction()}
			</div>
		);
	}
};

export default Track;
import React from 'react';
import Tracklist from '../Tracklist/Tracklist';
import './Playlist.css';
class Playlist extends React.Component{
	render(){
		return(
			<div className="Playlist">
	      <input defaultValue={'New Playlist'}/>
	     	<Tracklist tracks={this.props.playlistTracks} />
	 	    <button className="Playlist-save">SAVE TO SPOTIFY</button>
			</div>
	  );
  }
};

export default Playlist;
load more v
72%

I cannot figure out why I am getting the console error of 'this.props.onSearch is not a function' when I run my code.,are still giving the same error in the console. Looks like I am going to have to dig a little deeper on this one!,Please can someone explain why this is happening and ways to resolve it.

SearchBox

import React from 'react';

import SearchForm from 'SearchForm';
import searchDisplay from 'searchDisplay';
import googleRequests from 'googleRequests';

class SearchBox extends React.Component {
constructor() {
	super();
	this.state = {
		searchResults: []
	}


	
}
handleSearch(searchTerm) {
	googleRequests.search(searchTerm).then((response) => {
		console.log(response.items);
		this.extrapolateResults(response.items);
	}), ((error) =>{
		console.log(error)
	});
}

extrapolateResults(arr) {
	function Book(objInArr) {
		this.link = objInArr.selfLink;
		this.bookTitle = objInArr.volumeInfo.title;
		this.author = objInArr.volumeInfo.authors;
		this.bookDescription = objInArr.volumeInfo.description;
		this.thumbnail = function() {
			if (objInArr.volumeInfo.hasOwnProperty('imageLinks')){
			return objInArr.volumeInfo.imageLinks.smallThumbnail
		} 
		else {
			return "No Thumbnail Available";
		}
	};
		this.thumbnailPic = this.thumbnail();
}

var finalRes = [];
var initRes = arr;
	initRes.forEach(function (objInArr) {
		var obj = new Book(objInArr);
		finalRes.push(obj);
	})
this.setState({
	searchResults: finalRes
})
console.log(finalRes, this.state.searchResults)

}


render() {
	var res = this.state.searchResults;

	function renderResults() {
		if (res.length !== 0) {
			return (<SearchDisplay content={res} />)
		}
		else {
			return;
		}
	}

	var style = {
		border: '1px solid black',
		height: '80%',
		width: '83%'
	}
	return (
		<div style={style}>
			<SearchForm onSearch={this.handleSearch.bind(this)}> 
</SearchForm>
		</div>)
}
};

export default SearchBox;

SearchForm

import React from 'react';

class SearchForm extends React.Component {
constructor(props) {
	super(props);

}
onFormSubmit(e) {
	e.preventDefault();
	var searchTerm = this.refs.searchTerm.value;
	if (searchTerm.length > 0) {
		this.refs.searchTerm.value = '';
  		this.props.onSearch(searchTerm).bind(this);
	}
}

render() {
	var style = {
		border: '1px solid black',
		float: 'left',
		height: '100%',
		width: '30%'
	}

	return(
		<div style={style} className="container">
			<form onSubmit={this.onFormSubmit.bind(this)}>
				<input type="text" placeholder="search name here" 
ref="searchTerm"/>
				<input type="submit" className="button" value="Get 
Book"/>
			</form>
		</div>
		);
}
};

export default SearchForm;
load more v
65%

In this tutorial, you will learn why this error occurs and how to fix it. This guide assumes that you have basic knowledge of React.js.,Now run your app again. The error disappears, and your data is parsed through correctly.,Why This Error Occurs

1 {
   2 "page": 1,
      3 "results": [{
            4 "poster_path": "/e1mjopzAS2KNsvpbpahQ1a6SkSn.jpg",
            5 "adult": false,
            6 "overview": "From DC Comics comes the Suicide Squad, an antihero team of incarcerated supervillains who act as deniable assets for the United States government, undertaking high-risk black ops missions in exchange for commuted prison sentences.",
            7 "release_date": "2016-08-03",
            8 "genre_ids": [
               9 14,
               10 28,
               11 80
               12
            ],
            13 "id": 297761,
            14 "original_title": "Suicide Squad",
            15 "original_language": "en",
            16 "title": "Suicide Squad",
            17 "backdrop_path": "/ndlQ2Cuc3cjTL7lTynw6I4boP4S.jpg",
            18 "popularity": 48.261451,
            19 "vote_count": 1466,
            20 "video": false,
            21 "vote_average": 5.91
            22
         },
         23 {
            24 "poster_path": "/lFSSLTlFozwpaGlO31OoUeirBgQ.jpg",
               25 "adult": false,
               26 "overview": "The most dangerous former operative of the CIA is drawn out of hiding to uncover hidden truths about his past.",
               27 "release_date": "2016-07-27",
               28 "genre_ids": [
                  29 28,
                  30 53
                  31
               ],
               32 "id": 324668,
               33 "original_title": "Jason Bourne",
               34 "original_language": "en",
               35 "title": "Jason Bourne",
               36 "backdrop_path": "/AoT2YrJUJlg5vKE3iMOLvHlTd3m.jpg",
               37 "popularity": 30.690177,
               38 "vote_count": 649,
               39 "video": false,
               40 "vote_average": 5.25
            41
         },
         42 {
            43 "poster_path": "/hU0E130tsGdsYa4K9lc3Xrn5Wyt.jpg",
               44 "adult": false,
               45 "overview": "One year after outwitting the FBI and winning the public’s adulation with their mind-bending spectacles, the Four Horsemen resurface only to find themselves face to face with a new enemy who enlists them to pull off their most dangerous heist yet.",
               46 "release_date": "2016-06-02",
               47 "genre_ids": [
                  48 28,
                  49 12,
                  50 35,
                  51 80,
                  52 9648,
                  53 53
                  54
               ],
               55 "id": 291805,
               56 "original_title": "Now You See Me 2",
               57 "original_language": "en",
               58 "title": "Now You See Me 2",
               59 "backdrop_path": "/zrAO2OOa6s6dQMQ7zsUbDyIBrAP.jpg",
               60 "popularity": 29.737342,
               61 "vote_count": 684,
               62 "video": false,
               63 "vote_average": 6.64
            64
         }
         65
      ]
   66
   67
}
load more v
75%

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Steps to reproduce: Click expanded in the row of the data grid,What happened instead: exception throw TypeError: f.pauseValidation is not a function,Reproduced in the simple example, got to users list, expand one row, and...

Related code:

function QEdit(props) {
  return (
    <Edit {...props}>
      <SimpleForm form={`estimation_edit_33`}>
        <TextInput source="status" />
      </SimpleForm>
    </Edit>
  );
}
export function OList(props) {
  return (
    <List pagination={<GlobalPagination />} {...props} filters={<OFilter />}>
      <Datagrid rowClick="expand" expand={<QEdit />}>
react - final - form.es.js: 175 Uncaught TypeError: f.pauseValidation is not a
function
at react - final - form.es.js: 175
at useConstant(react - final - form.es.js: 67)
at ReactFinalForm(react - final - form.es.js: 172)
at renderWithHooks(react - dom.development.js: 16317)
at mountIndeterminateComponent(react - dom.development.js: 18800)
at beginWork$1(react - dom.development.js: 20149)
at HTMLUnknownElement.callCallback(react - dom.development.js: 337)
at Object.invokeGuardedCallbackDev(react - dom.development.js: 386)
at invokeGuardedCallback(react - dom.development.js: 439)
at beginWork$$1(react - dom.development.js: 25768)
at performUnitOfWork(react - dom.development.js: 24682)
at workLoopSync(react - dom.development.js: 24658)
at performSyncWorkOnRoot(react - dom.development.js: 24247)
at react - dom.development.js: 12285
at unstable_runWithPriority(scheduler.development.js: 701)
at runWithPriority$2(react - dom.development.js: 12231)
at flushSyncCallbackQueueImpl(react - dom.development.js: 12280)
at flushSyncCallbackQueue(react - dom.development.js: 12268)
at discreteUpdates$1(react - dom.development.js: 24401)
at discreteUpdates(react - dom.development.js: 1439)
at dispatchDiscreteEvent(react - dom.development.js: 5914)
load more v
22%

Have you ever been working on a project, only to be jolted out of your flow state by an error message like this one?,This error is usually due to the fact that .map() is an array method, and does not work with other data types like strings or objects.,If you try to call .map() on the string, you’ll get the .map is not a function error message:

That’s not the same ingredients that the console is complaining about. The console is now complaining about this statement

let ingredients = this.props.ingredients.map((item) => {
return (<ListGroupItem key={item}>{item}</ListGroupItem>)
});
60%

React is a JavaScript library for building user interfaces.,Local storage and session storage,Don't use Redux unless you've tried local component state and were dissatisfied.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "props-uncaught" queries related to "This.props.onSave is not a function- Uncaught typescript error"