render() function in component class error

[ldecoker]

Hello!,

Below the code for my component:

class PodcastDropDownList extends Component {

	constructor(props) {
		super(...arguments);
		this.props = props;

		this.state = {
			podcastThemes: [],
			loading: false
		}
	}

	componentDidMount() {
		this.setState({
			loading: true,
		});
		api.getPodcastthemes()
			.then(({ data = {} } = {}) => {
				this.setState({
					podcastThemes: data,
					loading: false
				});
			});
	}

	render() {
		return(
			<div>
				<label htmlFor="themes">Select your podcast theme : </label>
				<select name="themes"
				        id="podcastThemes"
				>
					{ (this.state.loading) ?
						(<option value="">loading ... </option>)
						:
						(
							Object.keys(this.state.podcastThemes).map(
								key => (
									<option key={key} value={this.state.podcastThemes[key].id}>{this.state.podcastThemes[key].title}</option>
								)
							)
						)
					}
				</select>
			</div>
		);
	}
}

export default compose([
	withSelect( ( select, { slug } ) => {
		const { getCurrentPost } = select( 'core/editor' );
		const { getTaxonomy } = select( 'core' );
		const taxonomy = getTaxonomy( slug );
		return {
			terms: taxonomy ? select( 'core/editor' ).getEditedPostAttribute( taxonomy.rest_base ) : [],
			taxonomy,
		};
	} ),
])(PodcastDropDownList);

I got the following compilation error:

ERROR in ./metabox/podcasttheme/components/PodcastDropDownList.js
Module build failed: SyntaxError: Unexpected token (42:3)

  40 |  render() {
  41 |          return(
> 42 |                  <div>
     |                  ^

I do not understand this. Any idea?

Thx!

[Zac Gordon]

Okay, first thing I want to check is that this isn’t due to a missing babel config setup. If you just return some very simple React, like a p tag with text does it work or give the same error. Also, depending on what Boilerplate you started with, do you have a .babelrc file?

[ldecoker]

Indeed this was a missing babel config. I forgot to install the “@wordpress/babel-preset-default”.

thx !!

[Author]

Posts