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} />
}
}
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'm trying the tutorial from
https://fullcalendar.io/docs/react
and whenever I go to run the program, I get that error "Expected ref to be a function or a string." and then 38 frames stacked. I don't quite understand why I am getting this error.
import React from 'react'
import FullCalendar from '#fullcalendar/react'
import dayGridPlugin from '#fullcalendar/daygrid'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../store/Counter';
import './Calendar.css'
class MyApp extends React.Component {
render() {
return (
<div>
<FullCalendar defaultView="dayGridMonth" plugins=
{[dayGridPlugin]} />
</div>
);
}
}
export default connect(
state => state.events,
dispatch => bindActionCreators(actionCreators, dispatch)
)(MyApp);
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;
I'm trying to make a post using react v4 and axios, I was following this tutorial and I did exactly as he said, but I'm getting an error:
Maybe because I'm using another version of react, how can fix it?
Failed prop type: Invalid prop userSignupRequest of type function
supplied to SignUp, expected a single ReactElement.
here is my code:
import React from 'react';
import SignUpForm from './SignUpForm';
import { connect } from 'react-redux';
import { userSignupRequest } from '../../actions/signupActions';
import PropTypes from 'prop-types';
class SignUp extends React.Component{
render(){
const { userSignupRequest } = this.props;
return(
<SignUpForm userSignupRequest={userSignupRequest}/>
);
}
}
SignUp.propTypes = {
userSignupRequest: PropTypes.element.isRequired
}
export default connect(null, { userSignupRequest })(SignUp);
SignUp Actions:
import axios from 'axios';
import Constants from '../components/Constants'
export function userSignupRequest(userData) {
return dispatch => {
return axios.post(Constants.URL_REGISTER, userData);
}
}
Did you mean to have have element instead of func in your PropTypes?
SignUp.propTypes = {
userSignupRequest: PropTypes.func.isRequired
}