I keep getting this weird message and React isn´t rendering my component. I am pretty sure I am rendering and importing it correctly:
Container:
import searchBar from "./searchBar";
class ItemList extends Component {
render() {
return (
<searchBar/>
);
}
}
searchBar
import React, { Component } from 'react';
const searchBar = () => {
return <div>ssuhsuhuhsususu</div>;
}
export default searchBar
Change to
const SearchBar = () => {
return <div>ssuhsuhuhsususu</div>;
}
export default SearchBar;
I you give name in small caps it will be considered as HTML tag such as
<p>, <div>
So your component should always be starting with CAPS.
If you want to use component which name start with lowercase then use can use following tips:
Just assign it to capitalised variable before using it.
import searchBar from "./searchBar";
const Foo = searchBar;
<Foo/>
Full Code:
import searchBar from "./searchBar";
const Foo = searchBar;
class ItemList extends Component {
render() {
return (
<Foo/>
);
}
}
Related
I have a problem to access this.context in a class based consumer component. I have the following situation:
AppContext.js:
import React from "react";
const ContactContext = React.createContext(); // Create our context
export default ContactContext;
DataProvider.js:
import React, { Fragment } from "react";
import AppContext from "./AppContext";
export default class DataProvider extends React.Component {
state = {
contacts: {
contact1: {
id: 1,
firstName: 'Test User FN',
lastName: 'Test User LN'
}
}
};
render() {
return (
<>
<AppContext.Provider value={{contacts: this.state.contacts}}>
{this.props.children}
</AppContext.Provider>
</>
);
}
}
App.js:
import React from 'react';
import DataProvider from "./DataProvider";
import Contact from './components/contact/contact.component';
export default class App extends React.Component {
render() {
return (
<div>
<div className="container">
<DataProvider>
<Contact contactIndex={0}/>
</DataProvider>
</div>
</div>
);
}
}
The consumer Contact.js:
import React, { Component } from "react";
import AppContext from '../context/AppContext'
export default class Contact extends Component {
static contextType = AppContext;
componentDidMount () {
console.log('My context is: ' + this.context);
}
render() {
return (
<div className="card"></div>
);
}
}
The console output is:
My context is: undefined
Thanks for any help
Regards
Dakir
Only difference I see in the other answer's CodeSandbox is the import path is different.
import AppContext from "./AppContext";
vs:
import AppContext from '../context/AppContext'
Maybe OP has a filepath/import error?
p.s. If this is the error, TypeScript is a lifesaver for avoiding these kind of things in JS.
Your code seems right to me, I tried to replicate it in a Sandbox to find out the error and somehow works like a charm.
https://codesandbox.io/s/interesting-https-emgoz?file=/src/App.js
Tried to spot the difference but I couldn't honestly.
I'm new to react so I can't seem to figure out what I'm doing wrong here. The 'Good Morning Student' greeting isn't being displayed. The error message claims that 't is not defined' but I thought that's what I'm doing in the const.
I'm assuming its something wrong with the syntax but from what I've been reading this is all I can think of it to be.
index.js file
module.exports = {
homepage: {
'greeting': 'Good Morning Student',
}
};
greeting.js file
import PropTypes from 'prop-types';
import React from 'react';
class Greeting extends React.Component {
render() {
const {
p: { t }
} = this.props;
return (
<p> {t('greeting')} </p>
);
}
}
Greeting.PropTypes = {
Greeting: PropTypes.string.isRequired
};
export default Greeting;
homepage.js
<Greeting />
You need to pass prop p to your <Greeting /> component. See this:
const obj = { t: {'greeting': 'Good Morning Student'}}
<Greeting p={t} />
then you can access it from props:
const {
p: { t }
} = this.props;
You have not passed in a t function to your Greeting component, that's why it claims to be undefined. In the below code I have imported the data from index.js and passed it into the Greeting component as the greeting prop. Then inside the Greeting component itself I destructure greeting out of the props to use it.
Note that the path to the index file is a guess so edit this to make sure it is pointing to the actual place the file lives in the directory.
hompage.js
import data from 'index';
...
<Greeting greeting={data.plp.greeting} />
greeting.js
import PropTypes from 'prop-types';
import React from 'react';
class Greeting extends React.Component {
render() {
const {
greeting
} = this.props;
return (
<p>{greeting}</p>
);
}
}
Greeting.PropTypes = {
greeting: PropTypes.string.isRequired
};
export default Greeting;
I'm new to react native and would like to use Context to keep a socket connection alive between screens in the future. For now, I tried to learn the concept of context just to pass simple values around but the value doesn't get sent.
Tried to follow the tutorial here, but by sending simple values instead.
I create my ValueContext in ValueContext.js here.
import React from 'react';
const ValueContext = React.createContext();
export default ValueContext;
Here's my LoginScreen.js where I set context provider.
import React, { Component } from 'react';
import ConnectionScreen from './ConnectionScreen';
import ValueContext from './ValueContext';
const testValue = 5;
export const sendValue = props => (
<ValueContext.Provider value={testValue}>
<ConnectionScreen />
</ValueContext.Provider>
)
class LoginScreen extends Component {
render() {
return()
}
}
Then in my ConnectionScreen.js
import React, { Component } from 'react';
import { View, Alert } from 'react-native';
import LoginScreen from './LoginScreen';
import ValueContext from './ValueContext';
export const receiveValue = props => (
<ValueContext.Consumer>
{testValue => <ConnectionScreen {...props} testValue={testValue} />}
</ValueContext.Consumer>
)
class ConnectionScreen extends Component {
showAlertValue = () => {
Alert.alert(this.props.testValue);
}
render() {
return(
<View>
{this.showAlertValue()}
</View>
)
}
}
So after setting the value in LoginScreen, I would like to access it in ConnectionScreen. All I get in my alert box is an empty box with no values. Am I doing something wrong here?
I'm using a ES7 React/Redux/GraphQL/React-Native snippets in VS Code and I'm not sure which "type" of export use. If export should be at the class / functional component declaration or at the end of the file.
In the code below, I have 2 class components exports and 3 functional components exports.
Which of these is reccomended?
// ****************************************
// 1. rcc
// ****************************************
import React, { Component } from 'react'
export default class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
// ****************************************
// 2. rce
// ****************************************
import React, { Component } from 'react'
class myComponent extends Component {
render() {
return (
<div>
</div>
)
}
}
export default myComponent
// ****************************************
// 3. rfc
// ****************************************
import React from 'react'
export default function myComponent() {
return (
<div>
</div>
)
}
// ****************************************
// 4. rfce
// ****************************************
import React from 'react'
function myComponent() {
return (
<div>
</div>
)
}
export default myComponent
// ****************************************
// 5. rafc
// ****************************************
import React from 'react'
const myComponent = () => {
return (
<div>
</div>
)
}
export default myComponent
My second question is about functional components - It is better (recommended) to write a functional component as an arrow function or classical function declaration?
Thanks a lot!
Dan Abramov said in his tweet:
JS tip: no matter which export style you prefer (default or named) or
which function style you use (arrow or declaration), make sure your
functions have names! Especially important for React components to
show up named in DevTools and warnings.
And, between using rce and rcc for exporting class components: It's up to you to decide, however, as in CRA documentation rce is used:
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file
class DangerButton extends Component {
render() {
return <Button color="red" />;
}
}
export default DangerButton;
With this style, you can use HOCs easily, for this example we want to warp our class component into a Higher Order Component provided by a library:
import { injectIntl} from "react-intl";
class Button extends React.Component {
render() {
const intl = this.props.intl;
const title = intl.formatMessage({
id: "button.title",
defaultMessage: "Hello!"
});
return <Button title={title}>...</Button>;
}
}
export default injectIntl(Button);
And between using the Functional components vs Class components: Please refer to the documentation, functional components are easier to write and to test, and now with React's useState hook you can use state in your functional components. For class components read React.Component documentation.
if you want to export multiple component in a file then you have to use only export ComponentName (without default).
then you can import as
import {ComponentA,ComponentB,...} from '../directory'
the other case is that you can export only one component in a file as
export default Class extends ........{} //
or
export default Class; // at the end of file
Both are same.
and you can import with any name
import Class from '../directory'
I'm trying to get the SVG string for each highchart and log it to the console before I starting working on building out my function.
I think the issue I'm having is with the way that I'm calling getSVG(), but I'm not sure.
I've tried a number of things and can't seem to get it to work.
The documentation isn't very clear about it:
https://github.com/kirjs/react-highcharts
Edit: I found a similar issue here, but still can't get it to work:
https://github.com/kirjs/react-highcharts/issues/186
import React, { Component } from 'react';
import RHC from 'react-highcharts';
import Highcharts from 'highcharts';
import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);
const ReactHighcharts = RHC.withHighcharts(Highcharts);
class Chart extends Component {
componentDidMount() {
console.log(this.refs[this.props.name].getSVG());
}
render() {
return (
<ReactHighcharts config={this.props.config} ref={this.props.name}/>
);
}
}
export default Chart;
I'm getting this error:
TypeError: this.refs[this.props.name].getSVG is not a function. (In 'this.refs[this.props.name].getSVG()', 'this.refs[this.props.name].getSVG' is undefined)
Follow the below codes to implement in yours:
const ReactHighcharts = require('react-highcharts');
class MyComponent extends React.Component {
componentDidMount() {
let chart = this.refs.chart.getChart();
let svg = chart.getSVG(); // This is your SVG
}
render() {
return <ReactHighcharts config={config} ref="chart"/>;
}
}
If the above code under componentDidMount() didn't work, then try this code:
componentDidUpdate() {
if (this.refs.chart) {
let chart = this.refs.chart.refs.chart;
let html = document.createElement('html');
html.innerHTML = chart.innerHTML;
let svg = html.getElementsByTagName('svg')[0].outerHTML; // This is your SVG
}
}
import React from 'react';
import HighchartsReact from 'highcharts-react-official';
import Highcharts from 'highcharts/highcharts';
import exporting from 'highcharts/modules/exporting';
exporting(Highcharts)
class Chart extends Component {
componentDidMount() {
console.log(this.refs[chartRef].getSVG());
}
render() {
return (
<HighchartsReact
highcharts={Highcharts}
options={...yourOptions}
ref="chartRef"
/>);
}
}
export default Chart;
Here you can access getSVG. just include exporting(Highcharts)