I am very new to React and currently working on this hackernews app. I am following the instructions given in the book "the road to learn react" to build this app. However, the react life-cycle method componentDidMount() does not seem to be working as the console.log inside it is not being displayed. I have followed every instruction properly and double checked them. Still, I am unable to figure out the reason. Any help would be much appreciated.
My App.js file's code:
import React from 'react';
import './App.css';
const fetch=require("node-fetch");
const DEFAULT_QUERY='redux';
const PATH_BASE='https://hn.algolia.com/api/v1';
const PATH_SEARCH='/search';
const PARAM='query=';
//const url=`${PATH_BASE}${PATH_SEARCH}?${PARAM}${DEFAULT_QUERY}`
function isSearched(searchTerm){
return function(item){
return !searchTerm||item.title.toLowerCase().includes(searchTerm.toLowerCase());
}
}
class App extends React.Component{
constructor(props){
super(props);
this.state={
result:null,
searchTerm:DEFAULT_QUERY
}
this.fetchTopStories=this.fetchTopStories.bind(this);
this.setSearchTopStories=this.setSearchTopStories.bind(this);
this.onDismiss=this.onDismiss.bind(this);
this.onSearchChange=this.onSearchChange.bind(this);
}
setSearchTopStories({result}){
this.setState({result});
}
fetchTopStories(searchTerm){
fetch(`${PATH_BASE}${PATH_SEARCH}?${PARAM}${searchTerm}`)
.then(response=>response.json())
.then(result=>this.setSearchTopStories(result));
}
onDismiss(id){
const isNotId=item=>item.ObjectID!==id;
const updatedList=this.state.list.filter(isNotId);
this.setState({list:updatedList});
}
onSearchChange(event){
this.setState({searchTerm:event.target.value});
}
componentDidMount(){ //NOT WORKING
console.log("MOUNTED");
const {searchTerm}=this.state;
this.fetchTopStories(searchTerm);
}
render(){
const {result,searchTerm}=this.state
if(!result){return null;}
return(
<div className="page">
<div className="interactions">
<Search
value={searchTerm}
onChange={this.onSearchChange}
>Search</Search>
</div>
<Table
list={result.hits}
pattern={searchTerm}
onDismiss={this.onDismiss}/>
</div>
);
}
}
const Search=({value,onChange,children})=>{
return(
<form>
{children}<input type="text"
value={value}
onChange={onChange}/>
</form>
)}
const Table=({list,pattern,onDismiss})=>
<div className="table">
{
list.filter(isSearched(pattern)).map(item=>
<div key={item.ObjectID} className="table-row">
<span style={{width:'40%'}}>
<a href={item.url}>{item.title}</a>
</span>
<span style={{width:'30%'}}>{item.author}</span>
<span style={{width:'10%'}}>{item.comments}</span>
<span style={{width:'10%'}}>{item.points}</span>
<span style={{width:'10%'}}>
<Button onClick={()=>onDismiss(item.ObjectID)}
className="button-inline">Dismiss</Button>
</span>
</div>
)
}
</div>
const Button=({onClick,className='',children})=>{
return(
<button
type="button"
onClick={onClick}
className={className}>{children}</button>
)
}
export default App;
Note: Ignore the onDismiss() function, it still needs a work around.
