🏥 🏭 Working on the COVID-19 response in Canada? Plotly & the Canadian government can help you and your organization. Learn more and get in touch.

How to make Dash Dropdown value and label different from the DataFrame?

Trying to make a dropdown that the label is different than the value. Like the stock name is different than the stock symbol. See my dataframe below:

filepath_symbol = 'symbol_ticker.csv'
df3 = pd.read_csv(filepath_symbol, sep = ",")
print(df3.head())

symbol name
0 SPY SPDR S&P 500
1 CMCSA Comcast Corporation Class A Common Stock
2 KMI Kinder Morgan Inc.
3 INTC Intel Corporation
4 MU Micron Technology Inc.

This is the code that creates the dropdown:

 html.Div([html.Label('Financials Search'), 
dcc.Dropdown(id = 'input-2-submit', options=[{'label':i['name'], 'value':i['symbol']} for i in df3],searchable = True),
html.Button('Go',id = 'btn-2-submit')],className='three columns')

Then I’ve got this error:

options[8787].label in Dropdown with ID "input-2-submit" is required but it was not provided.

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)
Error: options[8787].label in Dropdown with ID “input-2-submit” is required but it was not provided.

at propTypeErrorHandler (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_2_2m1574885974.dev.js:33482:9)

at CheckedComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/dash_renderer.v1_2_2m1574885974.dev.js:30046:77)

at renderWithHooks (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:13073:18)

at mountIndeterminateComponent (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:15155:13)

at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:15760:16)

at performUnitOfWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:19447:12)

at workLoop (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:19487:24)

at renderRoot (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:19570:7)

at performWorkOnRoot (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:20477:7)

at performWork (http://127.0.0.1:8050/_dash-component-suites/dash_renderer/react-dom@16.v1_2_2m1574885967.8.6.js:20389:7)

I’ve been trying to find solutions but I am out of luck. Thank you guys and please help me out here!