We Keep Coding

TypeError: this.state.searchResults.map is not a function

The moment i try to enter in the search box its leading to the typeerror. I have declared the searchResults as a state. but its still throwing an error. Am i not calling the state properly? What should i change? is it the map method that i'm writing it ?
Sorry i'm new to react could someone possibly tell what i'm doing wrong thanks.
Search.js
import React, { Component } from 'react';
import './Search.css';
import axios from 'axios';
class Search extends Component {
constructor(props){
super(props);
this.state = {
searchResults : []
}
}
componentDidMount () {
const token = 'Bearer Wookie2019';
axios.get('https://wookie.codesubmit.io/movies?q=<search_term>',{
headers: {
'Authorization': token
}
}).then(response => {
this.setState({movies : response.data.movies});
console.log(response);
});
}
searchHandler = (event) => {
this.setState({
searchResults : event.target.value
})
console.log(this.searchResults);
}
render(){
return (
// <div className="search" >
// <input className = "form-control" type="text" avlue="inputVal" onChange = {this.searchHandler}/>
// {/* <i className="fas fa-search"></i> */}
// <button className ="btn btn-info">Search</button>
// <div className ="searchres">
// </div>
// </div>
<div>
<form>
<input className = "form-control" placeholder = "Search Movies" ref = { input => this.search = input} onChange = {this.searchHandler}/>
</form>
<div className = "searchresults">
{ this.state.searchResults.map(searchResult => <searchResult movie={this.state.searchResults}>{searchResult.title}</searchResult>)}
</div>
</div>
)
}
}
export default Search;
Title.js
import React, { Fragment } from 'react';
import Search from '../Search/Search';
import './Title.css';
const Title = (props) => {
return (
<Fragment>
<div className ="conatiner">
<div className ="row titlehead">
<div className="col-6">
<h3 className = "title">WOOKIE <br/> MOVIES</h3>
</div>
<div className = "col-6 searchMovie">
<Search {...props} />
</div>
</div>
</div>
</Fragment>
)
}
export default Title

Issues
If I had to guess I would say your onChange handler is setting your state to be undefined, or rather, to whatever you are inputting, which is a string, not an array.
Another issue is that you attempt to fetch your data when the component mounts, not when a search is entered.
The search is never invoked after mounting.
Solution
I suggest using the form's onSubmit event to do the search. Provide the input with an id attribute that can be accessed from the onSubmit event object. Pass the entered value to a computed query string.
import React, { Component } from 'react';
import './Search.css';
import axios from 'axios';
class Search extends Component {
constructor(props){
super(props);
this.state = {
searchResults : []
}
}
searchHandler = (event) => {
event.preventDefault();
const searchTerm = event.target.searchTerm.value
const token = 'Bearer Wookie2019';
axios.get(`https://wookie.codesubmit.io/movies?q=${searchTerm}`,{
headers: {
'Authorization': token
}
}).then(response => {
this.setState({ movies: response.data.movies });
console.log(response);
});
};
render(){
return (
<div>
<form onSubmit={searchHandler}>
<input
id="searchTerm"
className="form-control"
placeholder="Search Movies"
/>
<button type="submit">Search</button>
</form>
<div className="searchresults">
{this.state.searchResults.map(searchResult => <searchResult movie={this.state.searchResults}>{searchResult.title}</searchResult>)}
</div>
</div>
)
}
}

Passing picture from one component to another in React

I have a product component which I wish to pass its picture to another component, my picture is uploaded from Rails backend, and the product details are mapped. What I want to achieve is when you click on the button then your product picture will display in the design page to be custom design.
import axios from 'axios';
import CardDeck from 'react-bootstrap/CardDeck';
import Card from 'react-bootstrap/Card';
import {Link} from 'react-router-dom';
import Display from './Display';
const SERVER_URL = "http://localhost:3000/products/index";
const IMAGE_URL = "http://localhost:3000/";
class Product extends Component {
constructor(props) {
super(props);
console.log(props);
this.state = {
products: [],
name: '',
material: ''
}
}
fetchProducts () {
axios.get(SERVER_URL).then((res) => {
//console.log(res.data);
const allProducts = res.data;
//this.setState({product: []});
this.setState({products: res.data});
this.setState({material: res.data.id});
// const aProduct = [...new Set(allProducts.map(pro => pro.name))]
// console.log(aProduct);
})
}
componentDidMount(){
this.fetchProducts();
}
_handleClick = event => {
event.preventDefault();
axios.get(SERVER_URL,{
//product:{name: this.state.name, category: this.state.category}
}).then(res =>{
this.setState({
})
}).catch(error => {console.log(error);
});
}
render() {
return (
<div className="productGrid">
{this.state.products.map((product, index) => (
// <p>Name: {product.name} <p>Price:{product.price}</p> <p>Category:{product.category}</p>
// <p> Fixing Method:{product.fixing_method}</p> <p>Material:{product.material}</p>
// <p>Height:{product.height}</p>
<CardDeck>
<Card>
<Card.Img variant="top" src={IMAGE_URL + product.img_tag} />
<Card.Body>
<Card.Title>Name: {product.name}</Card.Title>
<Card.Text>Category: {product.category}</Card.Text>
<Card.Text>Price: ${product.price}</Card.Text>
<Card.Text>Material: {product.material}</Card.Text>
<Card.Text>Fixin Method: {product.fixing_method}</Card.Text>
<Card.Text>Shape: {product.shape}</Card.Text>
<Card.Text>Height: {product.height}</Card.Text>
<Card.Text>Width: {product.width}</Card.Text>
<Link to={"/DesignPage/" + product.id}><button >Design Me</button></Link>
</Card.Body>
</Card>
</CardDeck>
))}
<Display image={IMAGE_URL + product.img_tag}/>
</div>
);
}
}
export default Product;
Design Page
When you click on design me button then based on the product the picture of that product should appear in design page
import React, { Component } from 'react';
import SideBar from './SideBar';
import Nav from './Nav'
import Display from './Display';
class DesignPage extends Component {
constructor(props) {
super(props);
// console.log(props.match.params.design);
this.state = { }
}
render() {
return (
<div><Nav/>
<div className="container py-4">
<div className="row">
<div className="col-lg-5">
<SideBar/>
</div>
<div className="col-lg-6">
{/* <Display design={this.props.match.params.design}/> */}
<Display/>
</div>
</div>
</div>
</div>
);
}
}
export default DesignPage;
Display
import React from 'react';
import Product from './Product';
const Display = (props) => {
console.log(props.design);
return(
<div className="card card-content">
<div className="container-lg">
<div>{props.design}</div>
</div>
</div>
)
}
export default Display;

Access like props.image instead of props.design as i can see you are assigning your concatenating url to image in Product component.
const Display = (props) => {
console.log(props.image);
return(
<div className="card card-content">
<div className="container-lg">
<div>{props.image}</div>
</div>
</div>
)
}

How to hide some component based on some flag in react js

I want to hide some component based on some flag in react js.
I have an App component where I have Login and other components, I want to hide the other component until Login components this.state.success is false and on click of a button I am changing the sate, but it's not working, I am new to react,
My App Class compoenent -
import React, { Component } from "react";
import logo from "../../logo.svg";
// import Game from "../Game/Game";
import Table from "../Table/Table";
import Form from "../Table/Form";
import Clock from "../Clock/Clock";
import "./App.css";
import Login from "../Login/Login";
class App extends Component {
state = {
success: false
};
removeCharacter = index => {
const { characters } = this.state;
this.setState({
characters: characters.filter((character, i) => {
return i !== index;
})
});
};
handleSubmit = character => {
this.setState({ characters: [...this.state.characters, character] });
};
handleSuccess() {
this.setState({ success: true });
}
render() {
const { characters, success } = this.state;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<span className="Span-inline">App</span>
<Clock time={new Date()} />
</header>
<Login success={success} handleSuccess={this.handleSuccess} />
{success && (
<div className="container">
<h1>React Tutorial</h1>
<p>Add a character with a name and a job to the table.</p>
<Table
characterData={characters}
removeCharacter={this.removeCharacter}
/>
<h3>Add New character</h3>
<Form handleSubmit={this.handleSubmit} />
</div>
)}
{/* <Game /> */}
</div>
);
}
}
export default App;
My Login component -
import React, { Component } from "react";
import Greeting from "./Greeting";
import LogoutButton from "./LogoutButton";
import LoginButton from "./LoginButton";
class Login extends Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {
isLoggedIn: false,
name: "",
success: false
};
}
handleLoginClick() {
this.setState({ isLoggedIn: true });
this.setState({ success: true });
}
handleLogoutClick() {
this.setState({ isLoggedIn: false });
this.setState({ success: false });
}
onChange = e => {
this.setState({
name: e.target.value
});
};
render() {
const isLoggedIn = this.state.isLoggedIn;
const name = this.state.name;
// const successLogin = this.state.success;
let button;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting
isLoggedIn={isLoggedIn}
name={name}
onChange={this.onChange}
/>
{button}
</div>
);
}
}
export default Login;
please guide me on what I am doing wrong.
Why sometime debuggers do not trigger in react component?

For the sake of example I have used functional stateless component here. You can use Class component all upto you.
const conditionalComponent = (props) => {
let condition = true;
return (
{condition && <div><h1>Hello world</h1></div>}
}
Instead of directly giving condition you can even call function which returns a boolean value.

handleLoginClick() {
this.setState({ isLoggedIn: true });
this.setState({ success: true });
this.props.handleSuccess()
}
do like this
<Login success={success} handleSuccess=
{this.handleSuccess} />
bind this function

React Router: How to keep logged in data (props) when re-routing

I'm creating a React Router app and I'm learning authentication. Here are some parts:
Login component (login.jsx)
authenticates user's credential on the back end
sets the authentication token in local storage
return's the user's data
sets state with the data
passes state to Admin component
Admin component (admin.jsx)
protected by a private route (see privateroute.jsx)
basically a container component
passes user's data to and renders other components that display/edit the data
Authentication Button on the nav bar (authbutton.jsx)
checks if user is logged in and renders "login" or "logout" button
if logged in, also renders "my posts" button that routes to Admin
All works well from Login to Admin. My problem is that when I click away from the Admin page (like the home page) and then click on "my posts" button, it reroutes to Admin and knows I'm logged in, but the user's data is no longer available. Before, coming from the login component, the user's data was in this.props.location.state.me.
I'm stuck because I'm trying to route to Admin from two different components and I've never done that before. Furthermore, I feel like there's a solution in the authentication setup that I'm missing.
Other ideas:
Should I conditionally set state in Admin when the user's data is passed?
Should I store the data in local storage in the browser like I'm doing with the authentication token?
I tried fetching data, setting state in Admin with componentDidMount but it didn't re-render so I read to use componentWillReceiveProps but that's being deprecated and replaced with getDerivedStateFromProps. Could not figure that out.
login.jsx
import React, { Component, Fragment } from 'react';
import * as userService from '../../services/user';
import { Redirect } from 'react-router-dom';
import IndeterminateProgress from '../utilities/indeterminateprogress';
import Nav from '../home/nav';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
redirectToReferrer: false,
email: '',
password: '',
feedbackMessage: '',
checkingLogin: true,
me: ''
};
}
componentDidMount() {
userService.checkLogin()
.then((loggedIn) => {
if (loggedIn) {
this.setState({ redirectToReferrer: true, checkingLogin: false });
} else {
this.setState({ checkingLogin: false });
}
});
}
login(e) {
e.preventDefault();
userService.login(this.state.email, this.state.password)
.then((meData) => {
this.setState({ redirectToReferrer: true, me: meData })
})
.catch((err) => {
if (err.message) {
this.setState({ feedbackMessage: err.message });
}
});
}
handleEmailChange(value) {
this.setState({ email: value });
}
handlePasswordChange(value) {
this.setState({ password: value });
}
render() {
const { from } = this.props.location.state || { from: { pathname: '/admin', state: { ...this.state } } };
const { redirectToReferrer, checkingLogin } = this.state;
if (checkingLogin) {
return <IndeterminateProgress message="Checking Login Status..." />;
}
if (redirectToReferrer) {
return (
<Redirect to={from} />
);
}
return (
<Fragment>
<Nav />
<h2 className="heading center">Login to continue</h2>
<form className="center" onSubmit={(e) => this.login(e)}>
<div className="form-group">
<input
placeholder="Email"
id="email"
className="col-3"
type="email"
onChange={(e) => this.handleEmailChange(e.target.value)}
required
/>
</div>
<div className="form-group">
<input
placeholder="Password"
id="password"
className="col-3"
type="password"
onChange={(e) => this.handlePasswordChange(e.target.value)}
required
/>
</div>
{this.state.feedbackMessage ? (
<p>{this.state.feedbackMessage}</p>
) : null}
<input type="submit" value="Login" className="btn btn-info btn-sm" />
</form>
</Fragment>
);
}
}
export { Login };
admin.jsx
import React, { Component } from 'react';
import Nav from '../home/nav';
import AdminBlogContainer from './adminblogcontainer'
import { BrowserRouter as Router, Link } from 'react-router-dom';
const Admin = (props) => {
return (
<div className="flexcol center">
<Nav />
<h1 className="heading">Your Blog Posts</h1>
<AdminBlogContainer {...props.location.state.me} />
<Link to={{
pathname: '/write',
state: { ...props.location.state.me }
}}
className="btn btn-outline-secondary mt-4"
>Create a New Blog Post</Link>
</div>
)
}
export { Admin };
privateroute.jsx
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { isLoggedIn } from '../../services/user';
const PrivateRoute = (props) => {
const Component = props.component;
const propsToPass = Object.assign({}, props);
delete propsToPass.component;
return (
<Route {...propsToPass} render={props => (
isLoggedIn() ? (
<Component {...props} />
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}} />
)
)} />
);
};
export { PrivateRoute }
authbutton.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import { isLoggedIn } from '../../services/user';
const AuthButton = (props) => {
if (isLoggedIn()) {
return (
<div>
<Link className="btn btn-info m-1" to="/logout">Logout</Link>
<Link className='btn btn-info m-1' to={{
pathname: '/admin',
// state: { ...this.state }
}}
>My Posts</Link>
</div>
);
} else {
return (
<div>
<Link className="btn btn-info m-1" to="/login">Login</Link>
<Link className="btn btn-info m-1" to="/register">Register</Link>
</div>
)
}
};
export { AuthButton };

This is one of the reasons as to the creation of stores. Think of it as a global object that can be accessed anywhere within your application.
I personally have used mobx/mobx-react (easy and does things magically) and there is also redux
Using mobx you can do something like so:
Global store
// /stores/authentication.js
class AuthenticationStore {
user = {};
//authentication logic here
}
const authenticationStore = new AuthenticationStore();
export default authenticationStore;
Root App Component
// /app.js
import authenticationStore from './stores/authentication';
import { Provider } from 'mobx-react';
export default class App extends Component {
render(){
return (
<Provider authenticationStore={authenticationStore}>
<BrowserRouter>
<SomeComponent/>
</BrowserRouter>
<Provider>);
}
}
Some component;
// /components/some.component.js
#inject('authenticationStore')
class SomeComponent extends Component {
render(){
const {authenticationStore} = this.props;
const {user} = authenticationStore;
render(
<div>${user.name}</div>
)
}
}

There seem to be two main solutions to my problem. 1 is to use a store as answered on this page. The other is to store the data in local storage, which looks like:
in login.jsx set local storage instead of setting state
login(e) {
e.preventDefault();
userService.login(this.state.email, this.state.password)
.then((meData) => {
localStorage.setItem("me", JSON.stringify(meData))
this.setState({ redirectToReferrer: true})
})
.catch((err) => {
if (err.message) {
this.setState({ feedbackMessage: err.message });
}
});
}
retrieve data in adminblogcontainer.jsx
componentDidMount() {
let meData = JSON.parse((localStorage.getItem("me")))
authorsService.one(meData.id) ...

react-stripe-elements Error: You must provide a Stripe Element or a valid token type to create a Token

I am using react-stripe-elements to create a token for payments. However, according to the documentation when the card form is wrapped in the Elements component it should automatically pickup which stripe elements to tokenize.
However, in this case we are presented with the error
You must provide a Stripe Element or a valid token type to create a Token.
Here is the code:
import React from 'react';
import {CardCVCElement, CardExpiryElement, CardNumberElement, PostalCodeElement, StripeProvider, Elements} from 'react-stripe-elements';
class CheckoutForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(ev) {
ev.preventDefault();
this.props.stripe.createToken({email: 'test#test.com'}).then(({token }) => {console.log('Received Stripe token:', token)});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Card details
<CardNumberElement />
<CardExpiryElement />
<CardCVCElement />
<PostalCodeElement />
</label>
<button>Confirm order</button>
</form>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = { stripe: null };
}
componentDidMount() {
this.setState({ stripe: window.Stripe('test_key') });
}
render() {
return (
<StripeProvider stripe={this.state.stripe}>
<Elements>
<CheckoutForm stripe={this.state.stripe} />
</Elements>
</StripeProvider>
);
}
}
export default App;
According to the documentation the following should be true:
'Within the context of Elements, this call to createToken knows which Element to tokenize, since there's only one in this group.'
However, this doesn't seem to be the case. I have also tried using the single 'Card Element' and have not found any success in doing so.

It turns out I never managed to solve the issue using react-stripe-elements. I ended using the standard JS version (from the stripe documentation). Here is my current working solution:
import React from 'react';
class CheckoutForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
elements: null,
card: null
};
}
componentWillReceiveProps() {
this.setState({ elements: this.props.stripe.elements() }, () => {
this.setState({ card: this.state.elements.create('card') }, () => {
this.state.card.mount('#card-element');
});
});
}
handleSubmit(ev) {
ev.preventDefault();
this.props.stripe.createToken(this.state.card).then((token) => {
console.log('Received Stripe token:', token);
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div className="row">
<label >
Credit or debit card
</label>
<div id="card-element"/>
<div id="card-errors" role="alert"/>
</div>
<button>Submit Payment</button>
</form>
);
}
}
class App extends React.Component {
constructor() {
super();
this.state = {stripe: window.Stripe('test_key')};
}
render() {
return (
<CheckoutForm stripe={this.state.stripe}/>
);
}
}
export default App;

In the comments they rightly say you need to use the HOC injectStripe.
The docs for stripe.createToken mention that you need to pass the element you wish to tokenize data from.
Also from the github repo README:
⚠️ NOTE injectStripe cannot be used on the same element that renders the Elements component; it must be used on the child component of Elements. injectStripe returns a wrapped component that needs to sit under but above any code where you'd like to access this.props.stripe.
In my specif case I was using a Mobx store and I needed to handle createToken and my form submission in the same place.
Even though I had a reference to stripe since initialisation it didn't work.
The createToken call needs to come from a component child of Elements and with stripe injected.
I ended up having:
#inject('signupStore')
#observer
class CardInput extends React.Component {
componentDidMount() {
const { signupStore } = this.props;
const handleCard = async name => {
return await this.props.stripe.createToken({ name: name });
};
signupStore.assignHandleCard(handleCard);
}
render() {
return (
<label>
Card details
<CardElement style={{ base: { fontSize: '18px' } }} />
</label>
);
}
}
export default injectStripe(CardInput);
Passing the handler back to the store, and then using it from there.
Part of signupStore:
#action
async submitForm(formValues) {
if (this.stripe && this.handleCard) {
const tokenResponse = await this.handleCard(
`${formValues.firstName} ${formValues.lastName}`
);
runInAction(() => {
console.log('Card token received ', tokenResponse);
if (tokenResponse) {
this.cardToken = tokenResponse.token.id;
formValues.cardToken = this.cardToken;
}
});
const response = await request.signup.submit(formValues);
return response;
}
return null;
}

With the new #stripe/react-stripe-js library it's a bit different. We need to use ElementsConsumer component. Load stripe using loadStripe method and use Elements component to use your form with Stripe.
Here is a basic example.
import { Elements, loadStripe } from "#stripe/react-stripe-js"
const stripePromise = loadStripe(STRIPEKEY)
<Elements stripe={stripePromise}>
<CardForm />
</Elements>
CardForm.js
import {
CardNumberElement,
CardExpiryElement,
CardCvcElement,
ElementsConsumer,
} from "#stripe/react-stripe-js"
const StripeForm = ({ stripe, elements }) => {
const handleSubmit = async () => {
if (!stripe || !elements) {
return
}
const cardNumberElement = elements.getElement(CardNumberElement)
const res = await stripe.createToken(cardNumberElement)
}
return (
<form>
<div>
<label htmlFor="cardNumber">Card Number</label>
<div>
<CardNumberElement />
</div>
</div>
<div>
<label htmlFor="cardName">Card Name</label>
<input
type="text"
name="cardName"
required
placeholder="Please Enter"
pattern="[A-Za-z]"
/>
</div>
<div>
<label htmlFor="expDate">Exp. Date</label>
<div>
<CardExpiryElement />
</div>
</div>
<div>
<label htmlFor="CVC">CVC</label>
<div>
<CardCvcElement />
</div>
</div>
</form>
)
}
const CardForm = () => {
return (
<ElementsConsumer>
{({ stripe, elements }) => (
<StripeForm stripe={stripe} elements={elements} />
)}
</ElementsConsumer>
)
}
export default CardForm

React js it's working for me
Card component , Get error , Card Detail and Generate Token
import React, { useState, useEffect } from "react";
import {loadStripe} from '#stripe/stripe-js';
import {CardElement,Elements,useStripe,useElements} from '#stripe/react-stripe-js';
const stripePromise = loadStripe('pk_test_YOUR_STRIPE_KYE');
const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error, paymentMethod} = await stripe.createPaymentMethod({
type: 'card',
card: elements.getElement(CardElement),
});
console.log("paymentMethod",paymentMethod);
console.log("error", error);
if (paymentMethod) {
const cardElement = elements.getElement(CardElement);
let token = await stripe.createToken(cardElement);
console.log(token);
}
};
return (
<div>
<form onSubmit={ handleSubmit }>
<div className="login-box" id="step2" >
<div className="form-row">
<label for="card-element" style={ { color:" #76bbdf" } }>
Credit or debit card
</label>
</div>
<div >
<CardElement
className="StripeElement"
options={{
style: {
base: {
fontSize: '16px',
color: '#424770',
'::placeholder': {
color: '#aab7c4',
},
},
invalid: {
color: '#9e2146',
},
},
}}
/>
</div>
<button name="submintbtn2" className="btn btn-primary" > SUBSCRIBE </button>
</div>
</form>
</div>
)};
const Registration = () => (
<div>
<Elements stripe={stripePromise}>
<CheckoutForm />
</Elements>
</div>
);
export default Registration;