We Keep Coding

This expression is not callable. Type '{ Shop: typeof Shop; }' has no call signatures. React

I don't know how and why I'm getting this error in React.
I'm trying to build this components:
render() {
return (
<div>
<div>ShopsList</div>
{this.state.loading || !this.state.shops ?
(
<div></div>
) :
(
<div>
{this.state.shops.map(shop=>Shop(shop))} # Line with the error
</div>
)
}
</div>
)
}
but the program won't compile and gives the following message:
This expression is not callable. Type '{ Shop: typeof Shop; }' has
no call signatures
Shop is imported in the following way
import Shop from '../Shop';
with the folder ../Shop having the following structure:
Shop/
Shop.tsx
index.tsx
and index.tsx has this content:
import Shop from "./Shop";
export default {Shop}
Shop has been defined in this way, which has a constructor:
import React from 'react';
export interface IShopProps {
id: number;
name: string;
phone_number?: string;
}
class Shop extends React.Component<IShopProps, {}> {
constructor(props: IShopProps) {
super(props);
}
render() {
return (
<div className='shopRow'>
<div className='shopName'>{this.props.name}</div>
<div className='shopNumber'>{this.props.phone_number ? this.props.phone_number : "numero non disponibile"}</div>
</div>
)
}
};
export default Shop;
What am I doing wrong? I already tried looking up on SO for that message and I found this post, but to me it doesn't seem I have done the same error.
Edit:
I also tried as suggested by #Viet:
{this.state.shops.map((shop, index) => <Shop key={index} {...shop} />)}
and still get the error:
JSX element type 'Shop' does not have any construct or call
signatures. TS2604

Because Shop is the component so you should use it with <>:
{this.state.shops.map((shop, index) => <Shop key={index} {...shop} />)}
The problem is you import Shop wrong way. Just update import in your component where you use Shop component like this:
import { Shop } from "../Shop" // from index file
Or like this
import Shop from "../Shop/Shop" // from Shop file

React: Failed to import a JavaScript class from a folder

I have a React project and this is my first time using it.
I have a JavaScript in the container that import a JavaScript within the components.
This is my containers file
Restorans.js
import React, { Component } from 'react';
import Restoran from "./components/Restoran/Restoran";
import classes from "./Restorans.module.css";
class Restorans extends Component{
constructor(props){
super(props);
this.state = {
restorans:
[
{id:1, nama: "Restoran A", alamat: "This is address Restoran A", nomorTelepon : "0217352333"},
{id:2, nama: "Restoran B", alamat: "This is address Restoran B", nomorTelepon : "0217352334"},
{id:3, nama: "Restoran C", alamat: "This is address Restoran C", nomorTelepon : "0217352335"}
],
isLoading: true
}
}
componentDidMount() {
console.log("componentDidMount()");
}
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate()");
}
loadingHandler = () => {
const curretIsLoading = this.state.isLoading;
this.setState({isLoading: !(curretIsLoading)});
console.log(this.state.isLoading);
}
render() {
console.log("render()")
return(
<React.Fragment>
<div className={classes.Title}> All Restoran </div>
<div className={classes.Restorans}>
{this.state.restorans.map(restoran =>
<Restoran
key={restoran.id}
nama={restoran.nama}
alamat={restoran.alamat}
nomorTelepon = {restoran.nomorTelepon}
/>
)}
</div>
</React.Fragment>
);
}
}
export default Restorans;
and this is my components
Restoran.js
import React from "react";
import classes from "./Restoran.module.css";
const Restoran = props => {
return(
<div className={classes.Restoran}>
<h3>
{props.name}
</h3>
<p>
Alamat: {props.alamat}
</p>
<p>
Nomor Telepon: {props.nomorTelepon}
</p>
</div>
)
}
export default Restoran;
My folder library is as follow
When I run npm start on my terminal. I receive this error:
Module not found: Can't resolve './components/Restoran/Restoran' in 'C:\Users\[REDACTED]\projectreact\frontend-projectreact\src\containers\Restorans'
To my own understanding, there shouldn't be any error. I tried to add .js on the end but it still has the same problem. Where did I go wrong?

It looks like you are within the containers directory in Restorans.js.
If you want to access Restoran.js from components, you have to go two levels up and out of containers, so change your import in containers/Restorans.js to:
import Restoran from "./../../components/Restoran/Restoran";
The ../../ part will take you to the root parent directory where both containers and components live as children/sub-directories by moving you up two folders.
As far as CSS, I usually import it one place from in the root <App/> component after a normalizer/CSS Reset.

Firstly,(just an advice) try not to name your files same. I see Restorans.module.css both in Restoran and Restorans. It might get clumsy to do so. And next thing is if you want to import css file
import "../Restoran/Restoran.module.css"
or any specific element then
import {classes} from "../Restoran/Restoran.module.css"
Also , check the path as ,if you are working on Restoran.js then
"../../components/Restoran/Restoran"
.. -> changes to root and then from there you can change your folder and access the required components.

Defining the path as './../../components/Restoran/Restoran' should help.

You use incorrect relative path (in Restorans.js), try:
import Restoran from "../../components/Restoran/Restoran";
Also you can set up aliases to have absolute paths (import Restoran from '#components/Restoran/Restoran')

Setting up tabs on state

I'm trying to setup the tabs a React component in the parent component states, something like this
import React from 'react';
import Component1 from '../myChildComponents/Component1';
import Component2 from '../myChildComponents/Component2';
import Component3 from '../myChildComponents/Component3';
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
tabs: [
{id: '1', text: 'Tab 1', component: Component1},
{id: '2', text: 'Tab 2', component: Component2},
{id: '3', text: 'Tab 3', component: Component3},
]
}
}
render() {
return (
<!-- All the other stuff goes here, like the tabs headers -->
<TabContent>
{
this.state.tabs.map((t, i) =>
<TabPane key={i} tabId={t.tabId}>
<t.component {...this.props.data}>
</TabPane>
)
}
</TabContent>
)
}
}
Can something like this be achieved? I already tried using the React.createComponent function, but this worked
Edit1: Updated to reflect current test implementation, still seeing the following message on the console
Uncaught (in promise) Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in. Check the render metho

Yeah you can use a component like that.
render() {
return (
<!-- All the other stuff goes here, like the tabs headers -->
<TabContent>
{
this.state.tabs.map((t, i) =>
<TabPane key={i} tabId={t.tabId}>
<t.component {...t.data}/>
</TabPane>
)
}
</TabContent>
)
}
Only thing you need to change is:
your object key is component; lower case
you need to set the props by using the spread operator on the t.data object: {...t.data}

Popper.js React Wrapper - React.createElement: type is invalid

I am trying to implement the standalone example from here, using react-popper - I basically just copy pasted the code for now. It does render the component. However, when I click everything breaks. I am using it in Gatsby.js - if that should make a difference?
That's the error(s) I'm getting:
index.js:2177 Warning: React.createElement: type is invalid --
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed
up default and named imports.
Check your code at StandaloneExample.js:36.
And:
Uncaught TypeError: Object(...)(...) is not a function
at InnerPopper.render (Popper.js:159)
And:
The above error occurred in the component:
in InnerPopper (created by Context.Consumer)
in Popper (at StandaloneExample.js:34)
And multiple of these:
TypeError: Object(...)(...) is not a function
Here's my code:
import React, { PureComponent } from 'react'
import { Popper, Arrow } from 'react-popper'
import './popper.css'
class StandaloneExample extends PureComponent {
constructor(props) {
super(props);
this.state = {
isOpen: false,
}
}
handleClick = (e) => {
console.log(e);
this.setState({
isOpen: !this.state.isOpen,
})
}
render() {
return (
<div>
<h2>Standalone Popper Example</h2>
<div
ref={div => (this.target = div)}
style={{ width: 120, height: 120, background: '#b4da55' }}
onClick={this.handleClick}
>
Click {this.state.isOpen ? 'to hide' : 'to show'} popper
</div>
{this.state.isOpen && (
<Popper className="popper" target={this.target}>
Popper Content for Standalone example
<Arrow className="popper__arrow" />
</Popper>
)}
</div>
)
}
}
export default StandaloneExample
I've modified things a bit (the way I implement state etc.), because I thought this might fix the errors I'm getting, but it didn't. Apart from that the code is pretty much the same as in the sandbox example - I'm not sure where it breaks.
edit: I am importing things like so:
import StandaloneExample from './MenuDropdown/StandaloneExample.js'
and am using it in my render function like so:
<StandaloneExample />

The example you linked is for react-popper#0.x.
Please check that you aren't with version 1 or greater.
react-popper V1 had breaking changes from V0.
You can find V1 doc here and V0 doc here.

How do I import JSX into .tsx file (not in React)?

I am not using React.
I am using Stenciljs.
I have the following .tsx file:
export class MyComponent {
#Prop() message: string;
render() {
return (<div>{this.message}</div>);
}
}
I want to do this instead:
import myTemplate from '../my-template.??';
export class MyComponent {
#Prop() message: string;
render() {
return (myTemplate);
}
}
with ../my-template.?? containing:
<div>{this.message}</div>
Is it possible and how ? Thanks in advance for any help :)

Yes, you can absolutely do this, there are just a couple of things you need to tidy up:
Main file
import { Template } from '../template'; // No need for file extension but we're using a named export so we need the curly braces around 'Template'
export class MyComponent {
#Prop() message: string;
render() {
return ( // You don't technically need the parentheses here as you're just returning one thing
<Template /> // When outputting an imported component, it goes in angle brackets and the backslash closes it like an HTML element
)
}
}
Template
import React from 'react'; // template needs React
export const Template = () => { // defining the export in this way is known as a named export
return (
<p>A message here</p>
)
}
Okay, so that's going to get you a message output which is from your template. However, you were asking about passing a message to that template for it to output. That's totally easy as well - you just need to get some props in there. Here is the modified version of the above:
Main file
import { Template } from '../template';
export class MyComponent {
#Prop() message: string;
render() {
return (
<Template messageToOutput={message} /> // The first argument is the name of the prop, the second is the variable you defined above
)
}
}
Template
import React from 'react';
export const Template = (props) => { // props are received here
return (
<p>{props.messageToOutput}</p> // props are used here
)
}
That's how you pass data around in React - hope that helps!