I am using react-syntax-highlighter#15.4.3 for syntax highlighting. Below is the code:
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { docco } from "react-syntax-highlighter/dist/cjs/styles/hljs";
class CodeBlock extends PureComponent {
static propTypes = {
value: PropTypes.string.isRequired,
language: PropTypes.string
};
static defaultProps = {
language: null
};
render() {
const { language, value } = this.props;
return (
<SyntaxHighlighter style={docco}>
{value}
</SyntaxHighlighter>
);
}
}
export default CodeBlock;
<ReactMarkdown source={this.state.post.description} renderers={{CodeBlock}}/>
I expect it to detect the language automatically supplied to it by react-markdown, but it is not detecting the language and hence the code is not beautified.
What should I do so it starts detecting the language by itself?
I have found the below answer in the documentation of react-markdown:
import React from 'react'
import ReactMarkdown from 'react-markdown'
import SyntaxHighlighter from 'react-syntax-highlighter'
import {docco} from 'react-syntax-highlighter/dist/esm/styles/hljs'
import {render} from 'react-dom'
export const renderers = {
code: ({language, value}) => {
return <SyntaxHighlighter style={docco} language={language} children={value} />
}
}
Related
Im having this issue where even though I'm exporting both components
SearchBar & MainCard I keep getting this error message in my
App.js file. Any feedback is appreciated!
Error:
./src/App.js - Attempted import error: 'MainCard' is not exported from './components/ui-componets/SearchBar'.
App.js
import React, { Component } from 'react';
import { Container, Theme } from '#customLibrary/core'
import { connect } from 'react-redux';
import { fetchComponent } from './actions';
import TopMenu from './components/ui-componets/TopMenu';
import {SearchBar,MainCard} from './components/ui-componets/SearchBar';
class App extends Component {
state = {
visible: true,
width: 13,
}
handleClick = () => {
this.setState({ visible: !this.state.visible, width: 16 })
}
render() {
const { userData } = this.props;
const { visible } = this.state;
return <Theme>
<Container width='3379px'>
</Container>
<Container width='3379px'>
<TopMenu onClick={this.handleClick} userData={userData} />
</Container>
<Container width='3379px'>
<SearchBar />
</Container>
<Container width='3379px'>
<MainCard/>
</Container>
</Theme>
}
}
const mapStateToProps = (state) => {
return {
userData: state.user
}
}
export default connect(mapStateToProps, { fetchComponent })(App);
SearchBar.js
import React, { Component } from 'react';
import { IS_FETCHING_DBUSERS, FETCH_DBUSERS_SUCCESS, IS_FETCHING_ROLES, FETCH_ROLES_SUCCESS, IS_FETCHING_RESOURCES, FETCH_RESOURCES_SUCCESS } from '../../actions/keys';
import { users, Roles, Resources } from '../../actions/URI';
import { fetchComponent } from '../../actions/index';
import { connect } from 'react-redux';
import _ from 'lodash';
import {
Theme,
Grid, Form, Icon, Container, Loader,
Card, Typography, Tabs
} from '#customLibrary/core';
class SearchBar extends Component {
...
}
class MainCard extends Component {
...
}
const mapStateToProps = state => {
return {
Users: state.users,
roles: state.roles,
resources: state.resources,
}
}
export default connect(mapStateToProps, { fetchComponent })(SearchBar,MainCard);
import {SearchBar,MainCard} from './components/ui-componets/SearchBar';
You have used default export while exporting, but using the syntax for named imports while importing.
import CustomName from './components/ui-componets/SearchBar';
should work
Issue: You've not correctly exported MainCard, and you export them as a default export (i.e. only one component is exported), but you import them as named exports.
export default connect(mapStateToProps, { fetchComponent })(SearchBar,MainCard);
Solution: From what I know, the connect HOC can only decorate a single component at a time. If you want to export both then you'll need to connect both individually as named exports (i.e. remove the default keyword.
export const ConnectedSearchBar = connect(mapStateToProps, { fetchComponent })(SearchBar);
export const ConnectedMainCard = connect(mapStateToProps, { fetchComponent })(MainCard);
Now the import in App will work
import { SearchBar, MainCard } from './components/ui-componets/SearchBar';
I trying to test a React component which renders a D3 element in another class, below is the component code.
import React, {Component} from 'react';
import {graphql} from "react-apollo";
import * as compose from 'lodash.flowright';
import MostConvD3bar from './MostConvD3bar'
import MostConvProdQuery from "../../Query/MostConvProdQuery";
import style from "./MostConvProds.css"
class MostConvProds extends Component {
componentDidMount(){
if (!this.props.loading)
new MostConvD3bar(this.refs.mostConChart, this.props.products)
}
componentWillReceiveProps(nextProps){
if (!nextProps.loading)
new MostConvD3bar(this.refs.mostConChart, nextProps.products)
}
render() {
return (
<div className={style.container} ref="mostConChart"> </div>
)
}
}
const mostConvQuery = {
name: "mostConvQuery",
props({ mostConvQuery: { error, loading, mostConverted } }) {
return {
loading,
error,
products: mostConverted
}
}
}
export default compose(
graphql(MostConvProdQuery, mostConvQuery))(MostConvProds);
I have imported lodash.flowright as compose as you can see, but I am getting an error like below.
TypeError: compose is not a function
Any help will be appreciated.
Replace:
import * as compose from 'lodash.flowright';
with:
import { flowRight as compose } from 'lodash';
The component for route 'Feed' must be a React component.
I've checked most of the other similar questions here but the majority of them are due to basic syntax (which maybe I have too but am blind to!). I've removed chunks of code that aren't relevant to this issue (navigationOptions and other screens) and can still reproduce the error with just the below:
./navigators/AppNavigator.js
import { createStackNavigator, createAppContainer, createBottomTabNavigator } from 'react-navigation';
import { FeedScreen } from '../screens/FeedScreen';
const FeedStack = createStackNavigator({
Feed: FeedScreen,
});
const DashboardTabNavigator = createBottomTabNavigator(
{
FeedStack
}
);
const DashboardStackNavigator = createStackNavigator(
{
DashboardTabNavigator: DashboardTabNavigator
}
);
const AppContainer = createAppContainer(DashboardStackNavigator);
export default AppContainer;
./screens/DashboardScreen.js
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import AppContainer from '../navigators/AppNavigator';
class DashboardScreen extends Component {
render() {
return (
<AppContainer />
);
}
}
export default DashboardScreen;
./screens/FeedScreen.js
import React from 'react';
import { View } from 'react-native';
export default class FeedScreen extends React.Component {
render() {
return (
<View>
</View>);
}
}
Any idea what I've done wrong here?
You have a default export for FeedScreen ... not a named export:
Try this:
import FeedScreen from '../screens/FeedScreen';
import { FeedScreen } from '../screens/FeedScreen'
You cannot importe like this if you re exporting by default.
Remove your default export or do replace your importe like this :
import FeedScreen from '../screens/FeedScreen'
You are using export default statement, that means you can´t import like that, you should provide a variable to store the component.
import Component from 'defaultexport'
I'm attempting to use react redux, but I'm facing an issue. The following code only renders the first letter, "T", rather than all of "Test". The Redux debugger shows all of "Test". How can this be?
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import { localizeReducer } from 'react-localize-redux';
import { combineReducers, createStore } from 'redux';
import { LocalizeProvider } from "react-localize-redux";
const store = createStore(
combineReducers({localize: localizeReducer})
);
ReactDOM.render(
<LocalizeProvider store={store}>
<App />
</LocalizeProvider>,
document.getElementById('root'));
App.js:
import React, { Component } from 'react';
import { Translate, withLocalize } from "react-localize-redux";
import { renderToStaticMarkup } from 'react-dom/server';
class App extends Component {
constructor(props) {
super(props);
this.props.initialize({
languages: [
{ name: "English", code: "en" }
],
options: { renderToStaticMarkup }
});
let english = {
abc: "Test"
}
this.props.addTranslation(english);
}
render() {
return <Translate id="abc" />;
}
}
export default withLocalize(App);
If you want to add a translation for just one language, you would use addTranslationForLanguage. This one uses the single language format:
let english = {
abc: "Test"
}
this.props.addTranslationForLanguage(english, 'en');
addTranslation should be used when using multiple languages. This api requires the data in all-language-format, so you would do something like this array for multiple languages:
let translations = {
abc: ["Test"]
}
this.props.addTranslationForLanguage(translations);
I wonder how to use Inject without decorator.
First, I made this as Store.
//Data/imagedb
import { decorate, observable } from 'mobx';
class imageStore {
list = {
keyword : 'yoyo',
}
}
decorate(imageStore, {
list: observable,
})
export default imageStore;
Second, I made this code to inject Store on it.
//components/Image
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
class Image extends Component {
render() {
const onPut2 = {onPut};
return (
<div>
{onPut2}
</div>
);
}
}
export default inject(({ imSt }) => ({
onPut: imSt.list.keyword,
}))(observer(Image));
And finally, this is my last code.
The error is "Onput is not defined" in second code.
import React from 'react';
import Image from 'components/Image';
import { Provider } from 'mobx-react';
import imageStore from 'Data/imagedb'
const imSt = new imageStore();
const Home = () => {
return (
<div>
<Provider imSt={imSt}>
<Image />
</Provider>
</div>
);
};
export default Home;