警告：道具类型失败：提供给“ DropdownItem”的道具“ as”无效

Question

Here is the code:

import UserPlateFunction from './components/UserPlate';
import {Form, Dimmer, Loader, Message, Header, Dropdown} from 'semantic-ui-react';
import UserPlateFunction from './components/UserPlate';

       class Setting extends Component {
       render(){
       const {members} = this.state;
       return(
          <Dropdown>
                <Dropdown.Menu>
                {Object.keys(members).map((key, i) => {
                    return (
                      <Dropdown.Item 
                      as={UserPlateFunction(members[key].user.gravatar)}
                      />
                      ) 
                  })
              } </Dropdown.Menu>
                </Dropdown>
             )
        }
    }

The state variables are set in the custom methods(It's too lengthy to add here). The warning I am getting is

Warning: Failed prop type: Invalid prop as supplied to DropdownItem .

./components/UserPlate

import './index.css';
import PropTypes from 'prop-types';
import React from 'react';

let UserPlate = ({gravatar}) => (
  <div className="clearfix">
     <div className="user-img">
       <img src={gravatar} alt='this one'/>
      </div>
  </div>
);



UserPlate.propTypes = {
  gravatar : PropTypes.string.isRequired,
 };

function UserPlateFunction(image){
  return (<UserPlate  gravatar={image}/>)
}

export default UserPlateFunction;

Any idea what's wrong? Thanks in advance.

Answer 1

You need to give a function or the name of a HTML element. You are returning a React Component. ( return (<UserPlate gravatar={image}/>) )

The correct way would be passing the function bound with your value, so it is executed at render:

as={UserPlateFunction.bind(null, members[key].user.gravatar)}

Or, even better, export directly directly UserPlate and do something similar:

as={UserPlate.bind(null, {
  gravatar: members[key].user.gravatar}
)}