Answer the question
In order to leave comments, you need to log in
React Context: Why is the onSubmit event handler not working?
Hello!
I'm doing an online store project for a portfolio. I want to make a search functionality for products (arrays from JSON). I have a file with a Context, because the event in Search.js should affect the conditional rendering of components in Container.js (these 2 files are at different levels in the directory). When submitting the search form, nothing happens, console.log('1') is not output to the console either. Please tell me what I did wrong?
context.js:
import React, { Component } from 'react'
import { data } from './components/data'
const SearchContext = React.createContext()
class SearchContextProvider extends Component {
constructor() {
super()
this.state = {
value: '',
results: data,
areResultsVisible: false
}
this.handleSearch = this.handleSearch.bind(this)
}
handleSearch(e) {
e.preventDefault()
console.log('1') //<-- не показывается в консоли
this.setState = {
value: e.target.value,
results: data.filter(item => {
return item.title.toLowerCase().includes(e.target.value.toLowerCase())
}),
areResultsVisible: true
}
}
render() {
return (
<SearchContext.Provider value = {{
...this.state,
handleSearch: this.handleSearch
}}>
{this.props.children}
</SearchContext.Provider>
)
}
}
const SearchContextConsumer = SearchContext.Consumer
export { SearchContextProvider, SearchContextConsumer }
import React, { Component } from 'react'
import { StyledFormSearchBar } from '../styles'
import { SearchContextConsumer } from '../../context'
export default class Search extends Component {
render() {
return (
<SearchContextConsumer>
{
value => (
<StyledFormSearchBar>
<input type="search" name="search" className="border border-dark rounded" onSubmit={value.handleSearch}/>
<button type="submit" value="submit" className="bg-warning border-0 text-danger rounded-right position-relative">
<i className="fas fa-search"></i>
</button>
</StyledFormSearchBar>
)}
</SearchContextConsumer>
)
}
}
import React from 'react'
import { Route } from "react-router-dom"
import { StyledDivGridContainer } from './styles'
import { SearchContextConsumer } from '../context'
import Carousel from './container/Carousel'
import MobilePhonesDiscount from './container/products/carousel/MobilePhonesDiscount'
import LaptopsDiscount from './container/products/carousel/LaptopsDiscount'
import TabletsDiscount from './container/products/carousel/TabletsDiscount'
import Products from './container/Products'
import SearchResults from './container/SearchResults'
import MobilePhones from './container/products/MobilePhones'
import Laptops from './container/products/Laptops'
import Tablets from './container/products/Tablets'
import ProductPage from './container/ProductPage'
import About from './container/About'
import ContactUs from './container/ContactUs'
export default function Container() {
return (
<StyledDivGridContainer>
<div className="no-gutters justify-content-between">
<SearchContextConsumer>
{
value => {
return (
!value.areResultsVisible
? [
<Route exact path="/" component={Carousel}/>,
<Route exact path="/" component={Products}/>
]
: <Route exact path="/" component={SearchResults}/>
)
}
}
</SearchContextConsumer>
<Route path="/mobile_phones_discount" component={MobilePhonesDiscount}/>
<Route path="/laptops_discount" component={LaptopsDiscount}/>
<Route path="/tablets_discount" component={TabletsDiscount}/>
<Route path="/mobile_phones" component={MobilePhones}/>
<Route path="/laptops" component={Laptops}/>
<Route path="/tablets" component={Tablets}/>
<Route path="/product_page" component={ProductPage}/>
<Route path="/about" component={About}/>
<Route path="/contact_us" component={ContactUs}/>
</div>
</StyledDivGridContainer>
)
}
Answer the question
In order to leave comments, you need to log in
I have not seen yet that onSubmit is hung on the input, and not on the form)
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question