# Use AnyMod in a React project

# Setup

To use modules with React, add the mod tag via React's render and call AnyMod.render() when the React component has mounted:

class Demo extends React.Component {
  componentDidMount () {
    AnyMod.render()
  }
  render () {
    // Card with top image
    return <div id="anymod-aklnr"></div>
  }
}

You can use AnyMod.render() by itself or with a callback or promise. See the section on AnyMod.render for more.

# Example

# Rendering multiple mods

You can render multiple mods the same way as a single mod. However, React does require that its internal render function returns a single element. So to render multiple mods in a single React component, wrap them in a common element such as a <div>, like so:

render () {
  return (
    <div>
      {/* Card with top image */}
      <div id="anymod-aklnr"></div>
      {/* GitHub button */}
      <div id="anymod-oorka"></div>
      {/* Team page */}
      <div id="anymod-dmkdn"></div>    
    </div>
  )
}

# Create React App

If you are using Create React App or another ESLint tool, you may encounter an error along the lines of 'AnyMod' is not defined no-undef. In this case, you should add the following to the top of any files using AnyMod.render():

/* global AnyMod */

You can learn more about this solution here.

# Re-rendering

You can call AnyMod.render() as often as you'd like in your React component (or elsewhere). This method will not lead to an API call every time; if a mod has already been fetched once, AnyMod.render() will use that data instead of making another API call.